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整理 : 飞龙 


CSS3 动画 属性 (Animation) 





属性 描述 css 
@keyframes 规定 动画 。 3 
FEE Ei 简写 属性 ， 除 了 animation-play-state 3 
animation-name 规定 @keyframes 动画 的 名 称 。 3 
animation-duration 规定 动画 完成 一 个 周期 所 花费 的 秒 或 毫秒 。 3 
"bd E 规定 动画 的 速度 曲线 。 3 
animation-delay 规定 动画 何 时 开始 。 3 
animation-iteration- 规定 动画 被 播放 的 次 数 。 3 
animation-direction 规定 动画 是 否 在 下 一 周期 逆向 地 播放 。 3 
animation-play-state 规定 动画 是 否 正在 运行 或 暂停 。 3 
animation-fill-mode 规定 对 象 动画 时 间 之 外 的 状态 3 


CSS3 @keyframes 规则 


实例 
使 div 元 素 匀 速 向 下 移动 : 


Qkeyframes mymove 


{ 
from {top:Opx;} 
to {top:200px;} 
} 


@-moz-keyframes mymove /* Firefox */ 


{ 
from {top:Opx;} 
to {top:200px;} 
} 


@-webkit-keyframes mymove /* Safari 和 Chrome */ 


t 
from {top:@0px;} 
to {top:200px;} 
} 


Q-o-keyframes mymove /* Opera */ 
{ 

from {top:Opx;} 

to {top:200px;} 

} 


页 面 底部 有 更 多 实例 。 
M yu 口 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


目前 浏览 器 都 不 支持 @keyframes 规则 。 
Firefox 支持 替代 的 @-moz-keyframes 规则 。 
Opera 支持 替代 的 @-o-keyframes 规则 。 


Safari 和 Chrome 支持 替代 的 @-webkit-keyframes 规则 。 


定义 和 用 法 


通过 Qkeyframes 规则 ， 您 能 够 创建 动画 。 


创建 动画 的 原理 是 ， 将 一 套 CSS 样式 逐渐 变化 为 另 一 套 样式 。 

在 动画 过 程 中 ， 您 能 够 多 次 改变 这 套 CSS 样式 。 

以 百分比 来 规定 改变 发 生 的 时 间 ， 或 者 通过 关键 词 "from" 和 "to", SAF 0% 和 100%。 
096 是 动画 的 开始 时 间 ，100% 动画 的 结束 时 间 。 

为 了 获得 最 佳 的 浏览 器 支持 ， 您 应 该 始终 定义 0% 和 100% 选择 器 。 


注释 : 请 使 用 动画 属性 来 控制 动画 的 外 观 ， 同 时 将 动画 与 选择 器 绑 定 。 


语法 
语 》 
@keyframes _animationname_ {_keyframes-selector_ ( css-styles ;}} 


ta 描述 
animationname 必需 。 定 义 动画 的 名 称 。 
keyframes-selector 
必需 。 动 画 时 长 的 百分比 。 
合法 的 值 : 


e 0-100% 
e from (5 0% 相同 ) 
e to (5 10096 相同 ) 


| | css-styles | 必需 。 一 个 或 多 个 合法 的 CSS 样式 属性 。 | 


E: 自 试 一 试 实例 


实例 1 


在 一 个 动画 中 添加 多 个 keyframe 选择 器 : 


Qkeyframes mymove 
{ 

0% {top:0px;} 
25% {top:200px;} 
50% {top:100px;} 
75% (top:200px; 
100% {top:@0px;} 

H 


Q-moz-keyframes mymove /* Firefox */ 


0% {top:0px;} 
25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:@0px;} 

} 


@-webkit-keyframes mymove /* Safari 和 Chrome */ 
t 

0% {top:0px;} 

25% {top:200px;} 

50% {top:100px;} 

75% (top:200px; 

100% {top:QOpx;} 

} 


Q-o-keyframes mymove /* Opera */ 
t 

0% {top:0px;} 

25% {top:200px;} 

50% {top:100px;} 

75% {top:200px;} 

100% (top:Opx; 3 

} 


实例 2 
在 一 个 动画 中 改变 多 个 CSS 样式 : 


Qkeyframes mymove 

{ 

0% {top:0px; background:red; width:100px;} 

100% (top:200px; background:yellow; width:300px;} 
H 


Q-moz-keyframes mymove /* Firefox */ 

t 

0% {top:0px; background:red; width:100px;} 

100% (top:200px; background:yellow; width:300px;} 
} 


@-webkit-keyframes mymove /* Safari 和 Chrome */ 
t 

0% {top:0px; background:red; width:100px;} 

100% (top:200px; background:yellow; width:300px;} 
} 


Q-o-keyframes mymove /* Opera */ 

t 

0% (top:0px; background:red; width:100px;} 

100% (top:200px; background:yellow; width:300px;) 
H 


实例 3 
带 有 多 个 CSS 样式 的 多 个 keyframe 选择 器 : 


Qkeyframes mymove 

{ 

0% {top:0px; left:0px; background:red;} 

25% (top:Opx; left:100px; background:blue;} 

50% {top:100px; left:100px; background:yellow;} 
75% (top:100px; left:Opx; background:green;} 
100% {top:0px; left:0Opx; background:red;} 


Q-moz-keyframes mymove /* Firefox */ 

{ 

0% {top:0px; left:0px; background:red;} 

25% (top:Opx; left:100px; background:blue;} 

50% (top:100px; left:100px; background:yellow;} 
75% (top:100px; left:0px; background:green;} 
100% {top:Opx; left:Opx; background:red;} 

H 


Q-webkit-keyframes mymove /* Safari and Chrome */ 
{ 

0% {top:0px; left:0px; background:red;} 

25% (top:Opx; left:100px; background:blue;} 

50% (top:100px; left:100px; background:yellow;} 
75% (top:100px; left:0px; background:green;} 
100% {top:Opx; left:Opx; background:red;} 

} 


Q-o-keyframes mymove /* Opera */ 

t 

0% {top:0px; left:0px; background:red;} 

25% (top:Opx; left:100px; background:blue;} 

50% (top:100px; left:100px; background:yellow;} 
75% (top:100px; left:0px; background:green;} 
100% 5 (top:Opx; left:Opx; background:red;} 

} 
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CSS3 animation 属性 


实例 
使 用 简写 属性 ， 将 动画 与 div 元 素 绑 定 : 


div 

{ 

animation:mymove 5s infinite; 

-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ 


} 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


Internet Explorer 10、Firefox 以 及 Opera 支持 animation 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation 属性 。 


注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation 属性 。 


c. : 
animation 属性 是 一 个 简写 属性 ， 用 于 设置 六 个 动画 属性 : 


e animation-name 

e animation-duration 

e animation-timing-function 
e animation-delay 

e animation-iteration-count 
e animation-direction 


注释 : 请 始终 规定 animation-duration 属性 ， 否 则 时 长 为 0， 就 不 会 播放 动画 


JavaScript 语法 : 


吾 法 


animation: name duration 


值 
animation-name 
animation-duration 
animation-timing-function 
animation-delay 
animation-iteration-count 


animation-direction 
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object.style.animation="mymove 5s infinite" 


.timing-function 


mm m Hx 


2s 





25 


id at at BR BR BE 


di aW 


B 


以 


none 0 ease 0 1 normal 


描述 


ENS 
CN 
B 


开始 之 前 的 延迟 。 
该 播放 的 次 数 。 


.delay  iteration-count 


direction ; 


到 选择 器 的 keyframe Th. o 
花费 的 时 间 ， 以 秒 或 毫秒 计 。 


CSS3 animation-name 属性 


实例 
为 @keyframes 动画 规定 一 个 名 称 : 


div 

t 

animation:mymove 5s infinite; 

-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ 


} 
| Jt da SHE 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-name 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-name 属性 。 


注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-name 属性 。 


rr . i 
animation-name 属性 为 @keyframes 动画 规定 名 称 。 


注释 : 请 始终 规定 animation-duration 属性 ， 否 则 时 长 为 0， 就 不 会 播放 动画 了 。 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.animationName-"mymove" 


语法 


animation-name:  keyframename |none; 


值 描述 
keyframename 规定 需要 绑 定 到 选择 器 的 keyframe 的 名 称 。 
none 规定 无 动画 效果 (可 用 于 帮 盖 来 自 级 联 的 动画 ) 。 
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CSS3 animation-duration 属性 


实例 
为 @keyframes 动画 规定 一 个 名 称 : 


div 

{ 

animation-duration:2s; 

-webkit-animation-duration:2s; /* Safari 和 Chrome */ 


} 
浏览 器 支持 
IE Firefox Chrome Safari 


Internet Explorer 10、Firefox 以 及 Opera 支持 animation-duration 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-duration 属性 。 


注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-duration 属性 。 


定义 和 用 法 


animation-duration 属性 定义 动画 完成 一 个 周期 所 需要 的 时 间 ， 以 秒 或 毫秒 计 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.animationDuration-"3s" 


语法 


animation-duration: time ; 


Opera 


t 描述 
time 规定 完成 动画 所 花费 的 时 间 。 默 认 值 是 0， 意味 着 没有 动画 效果 。 
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CSS3 animation-timing-function 属性 


实例 

从 开头 到 结尾 以 相同 的 速度 来 播放 动画 : 
div 
animation-timing-function:2s; 


-webkit-animation-timing-function:2s; /* Safari 和 Chrome */ 


} 


浏览 器 支持 


IE Firefox Chrome Safari 


Internet Explorer 10、Firefox 以 及 Opera 支持 animation-timing-function 属性 。 


Safari 和 Chrome 支持 替代 的 -webkit-animation-timing-function 属性 。 


Opera 


注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-timing-function 属性 。 


定义 和 用 法 

animation-timing-function 规定 动画 的 速度 曲线 。 

速度 曲线 定义 动画 从 一 套 CSS 样式 变 为 另 一 套 所 用 的 时 间 。 
速度 曲线 用 于 使 变化 更 为 平滑 。 


默认 值 : ease 
继承 性 : no 


JavaScript 语法 : object.style.animationTimingFunction-"linear' 


语法 


animation-timing-function: value ; 


animation-timing-function 使 用 名 为 三 次 贝 塞 尔 (Cubic Bezier) KARRAKA, KERE 


度 曲 线 。 您 能 够 在 该 轿 数 中 使 用 自己 的 值 ， 也 可 以 预定 义 的 值 : 


值 描述 
linear 动画 从 头 到 尾 的 速度 是 相同 的 。 
ease 默认 。 动 画 以 低速 开始 ， 然 后 加 快 ， 在 结束 前 变 慢 。 
ease-in 动画 以 低速 开始 。 
ease-out 动画 以 低速 结束 。 
ease-in-out 动画 以 低速 开始 和 结束 。 
cubic- 在 cubic-bezier 函数 中 自己 的 值 。 可 能 的 值 是 从 0 到 1 的 
bezier(n,n,n,n) 数值 。 


提示 : 请 试 着 在 下 面 的 “亲自 试 一 试 "功能 中 使 用 不 同 的 值 。 


亲 目 试 一 试 - 实例 


实例 1 


为 了 更 好 地 理解 不 同 的 定时 画 数 值 ， 这 里 提供 了 设置 五 个 不 同 值 的 五 个 不 同 的 div 元 素 : 











/* W3C 和 Opera: */ 

#div1 [animation-timing-function: linear;) 

zdiv2 [animation-timing-function: ease;} 

#div3 [animation-timing-function: ease-in;) 

#div4 [animation-timing-function: ease-out;j 

#div5 [animation-timing-function: ease-in-out;) 

/* Firefox: */ 

#div1 [-moz-animation-timing-function: linear;) 
zdiv2 [-moz-animation-timing-function: ease;} 

Zdiv3 [-moz-animation-timing-function: ease-in;) 
#div4 [-moz-animation-timing-function: ease-out;) 
zdiv5 [-moz-animation-timing-function: ease-in-out;] 
/* Safari 和 Chrome: */ 

#div1 [-webkit-animation-timing-function: linear;} 
#div2 {-webkit-animation-timing-function: ease;} 
#div3 {-webkit-animation-timing-function: ease-in;} 
#div4 {-webkit-animation-timing-function: ease-out;} 
#div5 {-webkit-animation-timing-function: ease-in-out;} 


实例 2 
与 上 例 相 同 ， 但 是 通过 cubic-bezier 函数 来 定义 速度 曲线 : 


/* W3C 和 Opera: */ 

#div1 [animation-timing-function: cubic-bezier(0,0,1,1);) 

zdiv2 [animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);] 

#div3 [animation-timing-function: cubic-bezier(0.42,0,1,1);) 

#div4 [animation-timing-function: cubic-bezier(0,0,0.58,1);) 

#div5 [animation-timing-function: cubic-bezier(0.42,0,0.58,1);] 

/* Firefox: */ 

#div1 [-moz-animation-timing-function: cubic-bezier(0,0,1,1);) 

zdiv2 [-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);] 
zdiv3 [-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);] 

zdiv4 [-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);] 

zdiv5 [-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);) 

/* Safari 和 Chrome: */ 

#div1 [-webkit-animation-timing-function: cubic-bezier(0,0,1,1);] 

zdiv2 [-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);) 
zdiv3 [-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);) 
#div4 [-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);) 
zdiv5 [-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);) 
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CSS3 animation-delay 属性 


"p? 

实例 

等 待 两 秒 ， 然 后 开始 动画 : 
div 
animation-delay:2s; 


-webkit-animation-delay:2s; /* Safari 和 Chrome */ 


} 


| Jt da SHE 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-delay 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-delay 属性 。 


注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-delay 属性 。 


rs. : 
animation-delay 属性 定义 动画 何 时 开始 。 

animation-delay 值 以 秒 或 毫秒 计 。 

提示 : 允许 负 值 ，-2s 使 动画 马上 开始 ， 但 跳 过 2 秒 进 入 动画 。 


默认 值 : 0 
继承 性 : no 


JavaScript 语法 : object.style.animationDelay-"2s" 


语法 


animation-delay: time ; 


值 描述 测试 
time 可 选 。 定 义 动画 开始 前 等 待 的 时 间 ， 以 秒 或 毫秒 计 。 默 认 值 是 0。 测试 


X El T —jX i 实例 
负 值 ， 请 注意 动画 跳 过 2 秒 进 入 动画 周期 : 


animation-delay: -2s /* W3C 和 Opera */ 
-moz-animation-delay: -2s /* Firefox */ 
-webkit-animation-delay: -2s /* Safari 和 Chrome */ 


相关 页 面 
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CSS3 animation-iteration-count 属性 


实例 
播放 动画 三 次 : 
div 
{ 


animation-iteration-count:3; 
-webkit-animation-iteration-count:3; /* Safari 和 Chrome */ 


} 
| EAFF 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-iteration-count 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-iteration-count 属性 。 


注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-iteration-count 属性 。 


定义 和 用 法 


animation-iteration-count 属性 定义 动画 的 播放 次 数 。 


默认 值 : 1 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.animationlterationCount-3 


语法 


animation-iteration-count: (n Jinfinite; 


值 描述 测试 


n 定义 动画 播放 次 数 的 数值 。 测试 
infinite 规定 动画 应 该 无 限 次 播放 。 测试 


相关 页 面 
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CSS3 animation-direction 属性 


实例 
暂停 动画 : 
div 


animation-direction:alternate; 
-webkit-animation-direction:alternate; /* Safari 和 Chrome */ 


} 


| Jt da SHE 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-direction 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-direction 属性 。 


注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-direction 属性 。 


= : 
animation-direction 属性 定义 是 否 应 该 轮流 反 向 播放 动画 。 


如 果 animation-direction 值 是 "alternate"， 则 动画 会 在 奇数 次 数 (1、3、5 等 等 ) 正常 播放 ， 
而 在 偶数 次 数 (2、4、6 等 等 ) 向 后 播放 。 


注释 : 如 果 把 动画 设置 为 只 播放 一 次 ， 则 该 属性 没有 效果 。 
默认 值 : normal 


继承 性 : no 


JavaScript 语法 : object.style.animationDirection-"alternate" 


语法 


animation-direction: normal|alternate; 


值 描述 测试 
normal 默认 值 。 动 画 应 该 正常 播放 。 测试 
alternate 动画 应 该 轮流 反 向 播放 。 测试 


相关 页 面 
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CSS3 animation-play-state 属性 


实例 
暂停 动画 : 


div 

{ 

animation-play-state:paused; 
-webkit-animation-play-state:paused; /* Safari 和 Chrome */ 


} 
| Jt da SHE 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-play-state 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-play-state 属性 。 


注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-play-state 属性 。 


rr . i 
animation-play-state 属性 规定 动画 正在 运行 还 是 暂停 。 


注释 : 您 可 以 在 JavaScript 中 使 用 该 属性 ， 这 样 就 能 在 播放 过 程 中 暂停 动画 。 


默认 值 : running 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.animationPlayState-"paused" 


语法 


animation-play-state: paused|running; 


值 描述 测试 
paused 规定 动画 已 暂停 。 测试 
running 规定 动画 正在 播放 。 测试 


相关 页 面 
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CSS3 animation-fill-mode 属性 


实例 
为 h1 元 素 规定 填充 模式 : 


hi 


animation-fill-mode: forwards; 


浏览 器 支持 
IE Firefox Chrome Safari 


Internet Explorer 10, Firefox 以 及 Opera 支持 animation-fill-mode 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-animation-fill-mode 属性 。 


注释 : Internet Explorer 9 以 及 更 早 的 版 本 不 支持 animation-fill-mode 属性 。 


定义 和 用 法 


animation-fill-mode 属性 规定 动画 在 播放 之 前 或 之 后 ， 其 动画 效果 是 否 可 见 。 


注释 : 其 属性 值 是 由 喜 号 分 隔 的 一 个 或 多 个 填充 模式 关键 词 。 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.animationFillMode=none 


语法 


Opera 


animation-fill-mode : none | forwards | backwards | both; 


值 描述 
none 不 改变 默认 行为 。 
forwards 当 动 画 完 成 后 ， 保 持 最 后 一 个 属性 值 〈 在 最 后 一 个 关键 帧 中 定义 ) 。 


backwards ”在 animation-delay 所 指定 的 一 段 时 间 内 ， 在 动画 显示 之 前 ， 应 用 开始 属性 
A 〈 在 第 一 个 关键 帧 中 定义 ) 。 


both 向 前 和 向 后 填充 模式 都 被 应 用 。 


相关 页 面 
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CSS 背景 属性 (Background) 


属性 
background 


background- 
attachment 


background-color 
background-image 
background-position 
background-repeat 
background-clip 
background-origin 


background-size 


描述 
在 一 个 声明 中 设置 所 有 的 背景 属性 。 


jk IE 置 背 景 图 像 是 否 固定 或 者 随 着 页 yi 面 的 其 余部 分 滚 
动 。 


设置 元 素 的 背景 颜色 。 

设置 元 素 的 背景 图 像 。 

设置 背景 图 像 的 开始 位 置 。 
设置 是 否 及 如 何 重复 背景 图 像 。 
规定 背景 的 绘制 区 域 。 

规定 背景 图 片 的 定位 区 域 。 
规定 背景 图 片 的 尺寸 。 


CSS 


C CO C 


CSS background 属性 


实例 
如 何在 一 个 声明 中 设置 所 有 背景 属性 : 


body 


{ 
background: #00FF00 url(bgimage.gif) no-repeat fixed top; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 background 属性 。 
注释 : IE8 以 及 更 早 的 浏览 器 不 支持 一 个 元 素 多 个 背景 图 像 。 


注释 : IE7 以 及 更 早 的 浏览 器 不 支持 "inherit"。1IE8 需要 IDOCTYPE, IE9 支持 "inherit"。 


= : 
background 简写 属性 在 一 个 声明 中 设置 所 有 的 背景 属性 。 
可 以 设置 如 下 属性 : 


e background-color 

e background-position 

e background-size 

e background-repeat 

e background-origin 

e background-clip 

e background-attachment 
e background-image 


如 果 不 设置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 background:#ff0000 url('smiley.gif); 也 是 多 
许 的 。 

通常 建议 使 用 这 个 属性 ， 而 不 是 分 别 使 用 单个 属性 ， 因 为 这 个 属性 在 较 老 的 浏览 器 中 能 够 得 
到 更 好 的 支持 ， 而 且 需 要 键入 的 字母 也 更 少 。 


默认 值 : not specified 


继承 性 : no 
版 本 : CSS1 + CSS3 
JavaScript 语法 : object.style.background="white url(paper.gif) repeat-y" 


可 能 的 值 





值 描述 CSS 
background-color ALXE S 8 FH B) E ERE ME. 1 
background-position 规定 背景 图 像 的 位 置 。 1 
background-size 规定 背景 图 片 的 凡 寸 。 3 
background-repeat 规定 如 何 重复 背景 图 像 。 1 
background-origin 规定 背景 图 片 的 定位 区 域 。 3 
background-clip 规定 背景 的 绘制 区 域 。 3 
background- 规定 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚 1 
attachment 动 。 
background-image 规定 要 使 用 的 背景 图 像 。 1 
inherit 规定 应 该 从 父 元 素 继 承 background 属性 的 设置 。 1 


亲自 试 一 试 - 实例 


所 有 背景 属性 在 一 个 声明 之 中 
本 例 演示 如 何 使 用 简写 属性 来 将 所 有 背景 属性 设置 在 一 个 声明 之 中 。 


«html» 

«head» 

«style type="text/css"> 
body 


background: £Zff0000 url(/i/eg bg 03.gif) no-repeat fixed center; 


«/style» 
«/head» 


«body» 

<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
<p> 这 是 一 些 文本 。</p> 
</body> 


</html> 


相关 页 面 
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HTML DOM 参考 手册 : background 属性 


CSS background-attachment 属性 


例 


如 何 设置 固定 的 背景 图 像 : 


将 


body 


background-image: url(bgimage.gif); 
background-attachment: fixed; 


浏览 器 文 持 


IE Firefox Chrome 


所 有 浏览 器 都 支持 background-attachment 属性 。 


注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 


background-attachment 属性 设置 背景 图 像 是 否 固定 或 者 随 着 页 面 
默认 值 : scroll 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.backgroundAttachment-"fixed" 


可 能 的 值 


Safari 


面 的 其 余部 分 滚动 


Opera 


值 描述 


scroll 默认 值 。 背 景 图 像 会 随 着 页 面 其 余部 分 的 滚动 而 移动 。 
fixed 当 页 面 的 其 余部 分 滚动 时 ， 背 景 图 像 不 会 移动 。 
inherit 规定 应 该 从 父 元 素 继 承 background-attachment 属性 的 设置 。 


E 


TIY 实例 


如 何 设置 固定 的 背景 图 像 


4 


本 例 演示 如 何 设置 固定 的 背景 图 像 。 图 像 不 会 随 着 页 面 的 其 他 部 分 滚动 。 


«html» 

«head» 

«style type="text/css"> 
body 


background-image:url(/i/eg bg 02.gif); 
background-repeat:no-repeat; 
background-attachment : fixed 


«/style» 
«/head» 


«body» 

<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
<p> 图 像 不 会 随 页 面 的 其 余部 分 滚动 。</p> 
«/body» 








</html> 
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W3School CSS 参考 手册 


HTML DOM 参考 手册 : backgroundAttachment 属性 


CSS background-attachment 属性 


40 


CSS background-color 属性 


例 


将 


body 


background-color:yellow; 


} 
h1 


{ 
background-color :#00ff00; 


{ 
background-color :rgb(255,0,255); 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 background-color 属性 。 
注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 


< 、 
background-color 属性 设置 元 素 的 背景 颜色 。 


TRE 景 的 范围 


background-color 属性 为 元 素 设 置 一 种 纯色 。 这 种 颜色 会 填充 元 素 的 内 容 、 内 边 距 和 边框 区 
域 ， 扩 展 到 元 素 边 框 的 外 边界 (但 不 包括 外 边 距 ) o WRES EARS (如 虚线 边框 ) ， 
会 透 过 这 些 透明 部 分 显示 出 背景 色 。 


transparent 值 


尽管 在 大 多 数 情况 下 ， 没 有 必要 使 用 transparent。 不 过 如 果 您 不 希望 某 元 素 拥 有 背景 色 ， 同 
时 又 不 希望 用 户 对 浏览 器 的 颜色 设置 影响 到 您 的 设计 ， 那 么 设置 transparent 值 还 是 有 必要 
的 。 


默认 值 : transparent 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.backgroundColor-"Z00F F00" 


可 能 的 值 


值 描述 
color name 规定 颜色 值 为 颜色 名 称 的 背景 颜色 (比如 red) 。 
hex number 规定 颜色 值 为 十 六 进 制 值 的 背景 颜色 (比如 #ff0000) 。 


rgb_number 规定 颜色 值 为 rgb 代码 的 背景 颜色 〈 比 如 rgb(255,0,0)) 。 
transparent Mo ARE AER, 
inherit 规定 应 该 从 父 元 素 继 承 background-color 属性 的 设置 。 


TIY 实例 


` db 
设置 背景 颜色 


本 例 演示 如 何 为 元 素 设 置 背 景 颜色 。 


«html» 
«head» 


«style type="text/css"> 


body (background-color: yellow} 

hi (background-color: #00ff00} 

h2 (background-color: transparent) 

p (background-color: rgb(250,0,255)) 


p.no2 (background-color: gray; padding: 20px;} 
«/style» 

</head> 

<body> 


<h1> 这 是 标题 1</h1> 

<h2> 这 是 标题 2</h2> 

<p> 这 是 段落 </p> 

«p class="no2"> 这 个 段落 设置 了 内 边 距 。</p> 


«/body» 
</html> 


设置 文本 的 背景 颜色 


本 例 颜色 如 何 设置 部 分 文本 的 背景 颜色 。 


«html» 

«head» 

«style type="text/css"> 
span.highlight 

t 


background-color:yellow 


} 
</style> 
</head> 


<body> 

<p> 

<span class="highlight"> 这 是 文本 。</span> 这 是 文本 。 这 是 文本 。 这 是 文本 。 这 是 文本 。 这 是 文本 。 这 
</p> 

</body> 

</html> 


al 一 
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HTML DOM 参考 手册 : backgroundColor 属性 


CSS background-image 属性 


实例 


body 


background-image: url(bgimage.gif); 
background-color: #000000; 


| EAFF 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 background-image 属性 。 
注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

background-image 属性 为 元 素 设置 背景 图 像 。 

元 素 的 背景 占据 了 元 素 的 全 部 尺寸 ， 包 括 内 边 距 和 边框 ， 但 不 包括 外 边 距 。 

默认 地 ， 背 景 图 像 位 于 元 素 的 左上 角 ， 并 在 水 平和 垂直 方向 上 重复 。 

提示 : 请 设置 一 种 可 用 的 背景 颜色 ， 这 样 的 话 ， 假 如 背景 图 像 不 可 用 ， 页 面 也 可 获得 良好 的 
视觉 效果 。 

详细 说 明 

background-image 属性 会 在 元 素 的 背景 中 设置 一 个 图 像 。 


根据 background-repeat 属性 的 值 ， 图 像 可 以 无 限 平 铺 、 治 着 某 个 轴 (x desk y de) SESS, x 
者 根本 不 平 铺 。 


初始 背景 图 像 (RAR) 根据 background-position 属性 的 值 放 置 。 


默认 值 : none 


继承 性 : no 
版 本 CSS1 
JavaScript 语法 : object.style.backgroundImage-"url(stars.gif)" 


可 能 的 值 


值 描述 
url('URL') 指向 图 像 的 路 径 。 
none 默认 值 。 不 显示 背景 图 像 。 
inherit 规定 应 该 从 父 元 素 继 承 background-image 属性 的 设置 。 


TIY 实例 


将 图 像 设 置 为 背景 


本 例 演示 如 何 将 图 像 设置 为 背景 。 
«html» 
«head» 
«style type="text/css"> 
body (background-image:url(/i/eg bg 04.gif);) 
«/style» 
</head> 


<body></body> 


</html> 


相关 页 面 


CSS 教程 : CSS 背景 


HTML DOM 参考 手册 : backgroundlmage 属性 


CSS background-position 属性 


实例 
如 何 定位 背景 图 像 : 


body 
t 


background-image:url('bgimage.gif'); 
background-repeat:no-repeat; 
background-attachment :fixed; 
background-position:center; 


} 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 background-position 属性 。 
注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
background-position 属性 设置 背景 图 像 的 起 始 位 置 。 


这 个 属性 设置 背景 原 图 像 (由 background-image 定义 ) 的 位 置 ， 背 景 图 像 如 果 要 重复 ， 将 从 
这 一 点 开始 。 


提示 : 您 需要 把 background-attachment 属性 设置 为 fixed"， 才 能 保证 该 属性 在 Firefox 和 
Opera 中 正常 工作 。 
默认 值 : 0% 0% 
继承 性 : no 


JavaScript 语法 : object.style.backgroundPosition-"center 


可 能 的 值 


e top left 

e top center 

e top right 

e center left 

e center center 
e center right 
e bottom left 

e bottom center 
e bottom right 


| 
如 果 您 仅 规定 了 一 个 关键 词 ， 那 么 第 二 个 值 将 是 "center"。 
默认 值 : 0% 0%。 
| 1x% y% | 
第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 。 
左上 角 是 096 0%。 右 下 角 是 10096 100%。 
如 果 您 仅 规定 了 一 个 值 ， 另 一 个 值 将 是 50%。 
| | xpos ypos | 
第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 。 
左上 角 是 0 0。 单 位 是 像素 (0px 0px) 或 任何 其 他 的 CSS 单位 。 
如 果 您 仅 规定 了 一 个 值 ， 另 一 个 值 料 是 50%。 
您 可 以 混合 使 用 % 和 position 值 。 


Y 实例 


如 何 放置 背景 图 像 
本 例 演示 如 何在 页 面 上 放置 背景 图 像 。 


«html» 

«head» 

«style type="text/css"> 

body 

t 
background-image:url('/i/eg bg 03.gif'); 
background-repeat:no-repeat; 
background-attachment: fixed; 
background-position:center; 


«/style» 
</head> 


<body> 
<body> 
<p><b> 提 示 : </b> 您 需要 把 background-attachment 属性 设置 为 "fixed"， 才 能 保证 该 属性 在 Firefox 和 0| 
«/body» 
«/body» 
«/html» 


Hn —————————— M —Ó 
如 何 使 用 % 来 定位 背景 图 像 





本 例 演示 如 何 使 用 百分比 来 在 页 面 上 定位 背景 图 像 。 


«html» 

«head» 

«style type="text/css"> 

body 

t 

background-image: url('/i/eg bg 03.gif'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: 30% 20%; 


} 
</style> 
</head> 


<body> 
<p><b> 注 释 : </b> 为 了 在 Mozilla 中 实现 此 效果 ，background-attachment 属性 必须 设置 为 "fixed"。</p> 


</body> 
</html> 


二 sel 
如 何 使 用 像素 来 定位 背景 图 像 
本 例 演示 如 何 使 用 像素 来 在 页 面 上 定位 背景 图 像 。 


«html» 

«head» 

«style type="text/css"> 
body 


background-image: url('/i/eg bg 03.gif'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: 50px 100px; 


«/style» 
</head> 


<body> 
<p><b> 注 释 : </b>% T Mozilla 中 实现 此 效果 ，background-attachment 属性 必须 设置 为 "fixed"。</p> 
«/body» 
«/html» 


E — = &'l 


相关 页 面 


CSS 教程 : CSS 背景 
CSS 参考 手册 : background-image 属性 


HTML DOM 参考 手册 : backgroundPosition 属性 


CSS background-repeat 属性 


body 


background-image: url(stars.gif); 
background-repeat: repeat-y; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 background-repeat 属性 。 
注释 : 任何 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


Lr . i 

background-repeat 属性 设置 是 否 及 如 何 重 复 背 景 图 像 。 
默认 地 ， 背 景 图 像 在 水 平和 垂直 方向 上 重复 。 
详细 说 明 

background-repeat 属性 定义 了 图 像 的 平 铺 模式 。 


从 原 图 像 开 始 重复 ， 原 图 像 由 background-image 定义 ， 并 根据 background-position 的 值 放 
iB. 


默认 值 : repeat 
继承 性 : no 


JavaScript 语法 : object.style.backgroundRepeat-"repeat-y" 


提示 和 注释 


提示 : 背景 图 像 的 位 置 是 根据 background-position 属性 设置 的 。 如 果 未 规定 background- 
position 属性 ， 图 像 会 被 放置 在 元 素 的 左上 角 。 


可 能 的 值 


值 描述 
repeat 默认 。 背 景 图 像 将 在 垂直 方向 和 水 平方 向 重复 。 
repeat-x 背景 图 像 将 在 水 平方 向 重复 。 
repeat-y 背景 图 像 将 在 垂直 方向 重复 。 
no-repeat 背景 图 像 将 仅 显 示 一 次 。 
inherit 规定 应 该 从 父 元 素 继 承 background-repeat 属性 的 设置 。 


M 


TIY 实例 


如 何 重复 背景 图 像 
本 例 演示 如 何 重复 背景 图 像 。 


«html» 
«head» 


«style type="text/css"> 
body 


background-image: 
url(/i/eg bg 03.gif); 
background-repeat: repeat 
} 

</style> 

</head> 

<body> 


</body> 
</html> 


如 何在 垂直 方向 重复 背景 图 像 
本 例 演示 如 何 垂直 地 重复 背景 图 像 。 


«html» 
«head» 


«style type="text/css"> 
body 


background-image: 
url(/i/eg bg 03.gif); 
background-repeat: repeat-y 


«/style» 
«/head» 
«body» 


«/body» 
</html> 


如 何在 水 平方 向 重复 背景 图 像 
本 例 演示 如 何 水 平地 重复 背景 图 像 。 


«html» 
«head» 


«style type="text/css"> 
body 
{ 


background-image: 
url(/i/eg_bg_03.gif); 
background-repeat: repeat-x 


} 
</style> 
</head> 
<body> 


</body> 
</html> 


如 何 仅 显示 一 次 背景 图 像 


本 例 演示 如 何 仅 显示 一 次 背景 图 像 。 


«html» 
«head» 


«style type="text/css"> 
body 


1 
background-image: url('/i/eg bg 03.gif'); 
background-repeat: no-repeat 


} 
</style> 
</head> 
<body> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 背景 


HTML DOM 参考 手册 : backgroundRepeat 属性 


CSS3 background-clip 属性 


实例 
规定 背景 的 绘制 区 域 ， 


div 
1 


background-color:yellow; 
background-clip:content-box; 


} 
浏览 器 支持 
IE Firefox Chrome Safari 


IE9+、Firefox、Opera、Chrome 以 及 Safari 支持 background-clip 属性 。 


注释 : Internet Explorer 8 以 及 更 早 的 版 本 不 支持 background-clip 属性 。 


定义 和 用 法 


background-clip 属性 规定 背景 的 绘制 区 域 。 


默认 值 : border-box 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.backgroundClip="content-box" 


语法 


background-clip: border-box|padding-box|content-box; 


Opera 


值 


border-box 
padding-box 


content-box 


相关 页 面 


CSS3 教程 : CSS3 背景 


Fd 


描述 


db E 


背景 被 裁 航 到 边框 盒 。 
ARAR EJA X EHE, 


背景 被 裁剪 到 内 容 框 。 


测试 
测试 
测试 
测试 


CSS3 background-origin 属性 


实例 
相对 于 内 容 框 来 定位 背景 图像 : 


div 

t 
background-image:url('smiley.gif'); 
background-repeat:no-repeat; 
background-position:left; 
background-origin:content-box; 


} 
M yu [m | 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
IE9+、Firefox 4*, Opera, Chrome 以 及 Safari 5* 支持 background-origin 属性 。 
Lr . N 


background-origin 属性 规定 background-position 属性 相对 于 什么 位 置 来 定位 。 


注释 : 如 果 背 景 图 像 的 background-attachment 属性 为 "fixed"， 则 该 属性 没有 效果 。 


默认 值 : padding-box 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.backgroundOrigin-"content-box" 


语法 


background-origin: padding-box|border-box|content-box; 


值 
padding-box 
border-box 


content-box 


相关 页 面 


CSS3 教程 : CSS3 背景 


EE 


描述 
db 旦 . 


背景 图 像 相对 于 内 边 距 框 来 定位 。 


db Eu 


背景 图 像 相 对 于 边框 盒 来 定位 。 


db Eu 


背景 图 像 相 对 于 内 容 框 来 定位 。 


测试 
测试 
测试 
测试 


CSS3 background-size 属性 


规定 背景 图 像 的 尺寸 : 


div 

t 

background:url(img flwr.gif); 
background-size:80px 60px; 
background-repeat:no-repeat; 


} 


M 大 口 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
IE9+、Firefox 4+、Opera、Chrome 以 及 Safari 5+ 支持 background-size 属性 。 
raa. 1 


background-size 属性 规定 背景 图 像 的 尺寸 。 


默认 值 : auto 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.backgroundSize-"60px 80px" 


语法 


background-size: length | percentage |cover|contain; 


值 描述 测试 
length 
置 背 景 图 像 的 高 度 和 宽度 。 
第 一 个 值 设置 宽度 ， 第 二 个 值 设置 高 度 。 
如 果 只 设置 一 个 值 ， 则 第 二 个 值 会 被 设置 为 "auto"。 
| 测试 | | percentage | 
以 父 元 素 的 百分比 来 设置 背景 图 像 的 宽度 和 高 度 。 
第 一 个 值 设置 宽度 ， 第 二 个 值 设 置 高 度 。 
如 果 只 设置 一 个 值 ， 则 第 二 个 值 会 被 设置 为 "auto"。 
| 测试 | | cover | 
把 背景 图 像 扩 展 至 足够 大 ， 以 使 背景 图 像 完 全 覆盖 背景 区 域 。 
背景 图 像 的 某 些 部 分 也 许 无 法 显示 在 背景 定位 区 域 中 。 


| 测试 | contain | 把 图 像 图 像 扩展 至 最 大 尺寸 ， 以 使 其 宽度 和 高 度 完 全 适 点 内 容 区 域 。 
| 


亲自 试 一 试 - 实例 
拉 伸 背景 图 像 
拉 伸 背景 图 像 来 完全 覆盖 内 容 区 域 。 


| 测试 


拉 


对 


«IDOCTYPE html» 


«html» 
«head» 
«style» 
div 


background:url(/i/bg flower.gif); 
background-size:359?6 10096; 


-moz-background-size:3596 10096; /* 


background-repeat:no-repeat; 


«/style» 
</head> 
<body> 


<div> 

<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
</div> 


</body> 
</html> 


RER 


db E 
Fd 


图 像 ， 对 背景 


图 像 进行 拉 伸 ， 以 使 


</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 


<!DOCTYPE html> 


<html> 
<head> 
<style> 
div 


{ 


db E 
Fd 


图 像 水 平复 制 四 次 


background:url(/i/bg flower.gif); 
background-size:2596; 
border:2px solid £92b901; 


} 
</style> 
</head> 
<body> 


<div> 

<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
</div> 


</body> 
</html> 


相关 页 面 


这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 


这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 


这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 


老 版 本 的 Firefox */ 


图 像 恰 好 水 平复 制 四 次 。 


这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 
这 是 一 个 段落 。 


</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
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CSS 边框 属性 (Border 和 Outline) 


属性 描述 
border 在 一 个 声明 中 设置 所 有 的 边框 属性 。 
border-bottom 在 一 个 声明 中 设置 所 有 的 下 边框 属性 。 


border-bottom-color 设置 下 边框 的 颜色 。 
FAHER 


置 

border-bottom-style 设置 

border-bottom-width 设置 下 边框 的 宽度 。 
iB 


border-color 设置 四 条 边框 的 颜色 。 

border-left 在 一 个 声明 中 设置 所 有 的 左边 框 属性 。 
border-left-color 设置 左边 框 的 颜色 。 

border-left-style 设置 左边 框 的 样式 。 

border-left-width 设置 左边 框 的 宽度 。 

border-right 在 一 个 声明 中 设置 所 有 的 右边 框 属性 。 
border-right-color 设置 右边 框 的 颜色 。 
border-right-style 设置 右边 框 的 样式 。 
border-right-width 设置 右边 框 的 宽度 。 

border-style 设置 四 条 边框 的 样式 。 

border-top 在 一 个 声明 中 设置 所 有 的 上 边框 属性 。 
border-top-color 设置 上 边框 的 颜色 。 

border-top-style 设置 上 边框 的 样式 。 
border-top-width 设置 上 边框 的 宽度 。 

border-width 设置 四 条 边框 的 宽度 。 

outline 在 一 个 声明 中 设置 所 有 的 轮廓 属性 。 
outline-color 设置 轮 廊 的 颜色 。 

outline-style 设置 轮廓 的 样式 。 

outline-width 设置 轮廓 的 宽度 。 
border-bottom-left- | 定义 边框 左下 角 的 形状 。 

radius 


border-bottom-right | 定义 这 框 右 下 角 的 形状 。 


站 ES cB lis 
(Border 4l] Outline) 


CSS 
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border-image 


border-image-outset 
border-image-repeat 


border-image-slice 
border-image-source 
border-image-width 
border-radius 
border-top-left-radius 


border-top-right- 
radius 


box-decoration- 
break 


box-shadow 





简写 属性 ， 设 置 所 有 border-image-* 属性 。 
规定 边框 图 像 区 域 超出 边框 的 量 。 


图 像 边框 是 否 应 平 铺 (repeated)、 铺 满 (rounded) 或 拉 伸 
(stretched), 


规定 图 像 边框 的 向 内 偏 移 。 

规定 用 作 边 框 的 图 片 。 

规定 图 片 边框 的 宽度 。 

简写 属性 ， 设 置 所 有 四 个 border-*-radius 属性 。 
定义 边框 左上 角 的 形状 。 


定义 边框 右 下 角 的 形状 。 


CD 


向 方 框 添加 一 个 或 多 个 阴影 。 


CSS 边框 属性 (Border 和 Outline) 





C CO CQ CO wm 
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CSS border 属性 


border:5px solid red; 
d 


浏览 器 支持 


IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 border 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1E8 需要 IDOCTYPE。1E9 支持 
"inherit", 


r3 ~ N 
border 简写 属性 在 一 个 声明 设置 所 有 的 边框 属性 。 
可 以 按 顺 序 设 置 如 下 属性 : 

e border-width 


e border-style 


e border-color 


如 果 不 设置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 上 比如 border:solid #ff0000; 也 是 允许 的 。 


默认 值 : not specified 


继承 性 : no 
版 本 CSS1 
JavaScript 语法 : object.style.border-"3px solid blue" 


可 能 的 值 


值 描述 
border-width 规定 边框 的 宽度 。 参 阅 : border-width 中 可 能 的 值 。 
border-style MERHER. Ağ : border-style 中 可 能 的 值 。 
border-color 规定 边框 的 颜色 。 参 阅 : border-color 中 可 能 的 值 。 
inherit 规定 应 该 从 父 元 素 继承 border 属性 的 设置 。 





TIY 实例 


所 有 边框 属性 在 一 个 声明 之 中 
本 例 演示 用 简写 属性 来 将 所 有 四 个 边框 属性 设置 于 同一 声明 中 。 


«html» 

«head» 

«style type="text/css"> 
p 

t 

border: medium double rgb(250,0,255) 
} 

</style> 

</head> 

<body> 

<p>Some text</p> 
</body> 


«/html» 


相关 页 面 
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W3School CSS 参考 手册 


HTML DOM 参考 手册 : border 属性 


CSS border 属性 
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CSS border-bottom 属性 


例 


设置 下 边框 的 样式 : 


将 


t 
border-style:solid; 
border-bottom:thick dotted £Zff0000; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-bottom 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1E8 需要 IDOCTYPE, IE9 支持 
"inherit", 


< 、 : 
border-bottom 简写 属性 把 下 边框 的 所 有 属性 设置 到 一 个 声明 中 。 


可 以 按 顺序 设置 如 下 属性 : 


e border-bottom-width 
e border-bottom-style 
e border-bottom-color 


如 果 不 设 置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 border-bottom:solid #ff0000; 也 是 允许 的 。 


默认 值 : not specified 


继承 性 : no 
版 本 CSS1 
JavaScript 语法 : object.style.borderBottom-"3px solid blue" 


可 能 的 值 


值 描述 


border-bottom-width 规定 下 边框 的 宽度 。 参 阅 : border-bottom-width 中 可 能 的 值 。 


下 边框 的 颜色 。 参 阅 : border-bottom-color 中 可 能 的 值 。 


定 
border-bottom-style 规定 下 边框 的 样式 。 参 闵 : border-bottom-style 中 可 能 的 值 。 
border-bottom-color 规定 

定 





inherit 规定 应 该 从 父 元 素 继承 border-bottom 属性 的 设置 。 


TIY 实例 


所 有 下 边框 属性 在 一 个 声明 中 
本 例 演示 用 简写 属性 来 将 所 有 下 边框 属性 设置 在 同一 声明 中 。 


«html» 

«head» 

«style type="text/css"> 

p 

1 

border-style:solid; 
border-bottom:thick dotted 4Zff0000; 


«/style» 
</head> 


<body> 
<p>This is some text in a paragraph.</p> 
</body> 


</html> 


相关 页 面 
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W3School CSS 参考 手册 


HTML DOM 参考 手册 : borderBottom 属性 


CSS border-bottom 属性 
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CSS border-bottom-color 属性 


实例 
设置 下 边框 的 颜色 : 
p 


{ 
border-style:solid; 
border-bottom-color:4Zff0000; 


浏览 器 支持 


IE Firefox 


Chrome Safari Opera 


所 有 浏览 器 都 支持 border-bottom-color 属性 。 


注释 : Internet Explorer 6 (以 及 更 早 的 版 本 ) 不 支持 属性 值 "transparent"。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1E8 需要 IDOCTYPE, IE9 支持 


"inherit", 


定义 和 用 法 


border-bottom-color 设置 元 素 的 下 边框 的 颜色 。 


只 能 定义 纯色 ， 而 且 只 有 当 边 框 的 样式 是 一 个 非 none 或 hidden 的 值 时 边框 才 可 能 出 现 。 


前 获得 边框 。 
默认 值 
继承 性 : 
版 本 


JavaScript 语法 : 


not specified 


object.style.borderBottomColor-"blue" 


可 能 的 值 


值 
color name 
hex number 
rgb number 
transparent 


inherit 


M 


TIY 实例 


设置 下 边框 的 颜色 


描述 
规定 颜色 值 为 颜色 名 称 的 边框 颜色 (比如 red) 。 
规定 颜色 值 为 十 六 进 制 值 的 边框 颜色 (比如 #f0000) 。 
规定 颜色 值 为 rgb 代码 的 边框 颜色 〈 比 如 rgb(255,0,0)) 。 
默认 值 。 边 框 颜色 为 透明 。 
规定 应 该 从 父 元 素 继承 边框 颜色 。 


本 例 演示 如 何 设置 下 边框 的 颜色 。 


«html» 
«head» 


«style type="text/css"> 
p 


{ 
border-style:solid; 
border-bottom-color :#ff0000; 


} 
</style> 
</head> 


<body> 


<p>This is some text in a paragraph.</p> 


«/body» 


«/html» 


相关 页 面 
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CSS 参考 手册 : border-bottom 属性 


HTML DOM 参考 手册 : borderBottomColor 属性 


CSS border-bottom-style 属性 


例 


设置 下 边框 的 样式 : 


将 


{ 
border-style:solid; 
border-bottom-style:dotted; 


| Jt da SHE 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-bottom-style 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit" 或 "hidden"。 


re. š 
border-bottom-style 设置 元 素 下 边框 的 样式 。 
只 有 当 这 个 值 不 是 none 时 边框 才 可 能 出 现 。 


f£ CSS1 rh, HTML 用 户 代 理 只 需 支持 solid 和 none, 


默认 值 : not specified 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderBottomStyle-"dotted" 


可 能 的 值 


值 描述 


none 定义 无 边框 。 

hidden "none" 相同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边框 冲突 。 
dotted 义 点 状 边 框 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

dashed ”定义 虚线 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

solid 定义 实 线 。 


double 定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 。 

groove ”定义 3D 凹 槽 边框 。 其 效果 取决 于 border-color 的 值 。 
ridge 定义 3D 到 状 边 框 。 其 效果 取决 于 border-color 的 值 。 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 。 
outset 定义 3D outset 边框 。 其 效果 取决 于 border-color 的 值 。 
inherit 规定 应 该 从 父 元 素 继 承 边框 样式 。 


TIY 实例 


设置 下 边框 的 样式 
本 例 演示 如 何 设置 下 边框 的 样式 。 


«html» 

«head» 

«style type="text/css"> 
(border-style:solid) 

.none ([border-bottom-style:nonej 
.dotted [border-bottom-style:dotted) 
.dashed [border-bottom-style:dashed) 
.solid [border-bottom-style:solid) 
.double [border-bottom-style:double) 
.groove (border-bottom-style:groovej 
.ridge [border-bottom-style:ridge) 
.inset (border-bottom-style:inset) 
.Outset [border-bottom-style:outset) 
«/style» 

</head> 


zege e e TI e IS 


<body> 

«p class="none">No bottom border .</p> 

«p class="dotted">A dotted bottom border .</p> 
«p class="dashed">A dashed bottom border .</p> 
«p class="solid">A solid bottom border .</p> 
«p class="double">A double bottom border .</p> 
«p class="groove">A groove bottom border .</p> 
«p class="ridge">A ridge bottom border .</p> 
«p class="inset">An inset bottom border .</p> 
«p class-"outset"»An outset bottom border .</p> 
</body> 

</html> 


相关 页 面 


CSS 教程 : CSS 边框 
CSS 参考 手册 : border-bottom 属性 


HTML DOM 参考 手册 : borderBottomStyle 属性 


CSS border-bottom-width 属性 


{ 
border-style:solid; 
border-bottom-width:15px; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-bottom-width 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1IE8 需要 !DOCTYPE。1IE9 支持 
"inherit", 


ri . N 
border-bottom-width 属性 设置 元 素 的 下 边框 的 宽度 。 


只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 重 置 为 
0。 不 允许 指定 负 长 度 值 。 


注释 : 请 始终 在 border-bottom-width 属性 之 前 声明 border-style 属性 。 元 素 只 有 在 获得 边框 
之 后 ， 才 能 改变 其 边框 的 宽度 。 


默认 值 : medium 
继承 性 : no 


JavaScript 语法 : object.style.borderBottomWidth-"thick" 


可 能 的 值 


值 描述 
thin 定义 细 的 下 边框 。 
medium 默认 值 。 定 义 中 等 的 下 边框 。 
thick 定义 粗 的 下 边框 。 
length 允许 您 自 定义 下 边框 的 宽度 。 
inherit 规定 应 该 从 父 元 素 继承 边框 宽度 。 


a 


TIY 实例 


设置 下 边框 的 宽度 


本 例 演示 如 何 设置 下 边框 的 宽度 。 


«html» 

«head» 

«style type="text/css"> 
p.one 

t 

border-style: solid; 
border-bottom-width: 15px 


} 
p. two 


border-style: solid; 
border-bottom-width: thin 


} 
</style> 
</head> 
<body> 


«p class="one"><b> 注 释 : </b>"border-bottom-width" 属性 如 果 单 独 使 用 的 话 是 不 会 起 作用 的 。 请 首先 使 用 C 
«p class-"two"»Some text. Some more text.</p> 


</body> 
</html> 


E — B 


相关 页 面 


CSS 教程 CSS 边框 





CSS 参考 手册 : border-bottom 属性 


HTML DOM 参考 手册 : borderBottomWidth 属性 


CSS border-color 属性 


{ 
border-style:solid; 
border-color :#ff0000 #0000ff; 


M I 大 口 
浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 border-color 属性 。 


注释 : Internet Explorer 6 (以 及 更 早 的 版 本 ) 不 支持 属性 值 "transparent"。 
注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。|E8 需要 IDOCTYPE, IE9 支持 


"inherit", 

re. $ 

定义 和 用 法 

border-color 属性 设置 四 条 边框 的 颜色 。 此 属性 可 设置 1 到 4 种 颜色 。 


border-color 属性 是 一 个 简写 属性 ， 可 设置 一 个 元 素 的 所 有 疤 框 中 可 见 部 分 的 颜色 ， 或 者 为 4 
个 边 分 别 设置 不 同 的 颜色 。 请 看 下 面 的 例子 : 


例子 1 


border-color:red green blue pink; 


BE Bb 
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border-color:red green blue; 


上 边框 是 红色 
e 右边 框 和 左边 框 是 绿色 
下 边框 是 蓝 色 


例子 3 


border-color:dotted red green; 


border-color:red; 


e 所 有 4 个 边框 都 是 红色 
要 记 住 ， 边 框 的 样式 不 能 为 none 或 hidden， 否 则 边框 不 会 出 现 。 


注释 : 请 始终 把 border-style 属性 声明 到 border-color 属性 之 前 。 元 素 必 须 在 您 改变 其 颜色 之 


默认 值 : not specified 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderColor="#FF0000 blue" 


可 能 的 值 


值 描述 


color name 规定 颜色 值 为 颜色 名 称 的 边框 颜色 〈 比 如 red) 。 

hex number 规定 颜色 值 为 十 六 进 制 值 的 边框 颜色 (比如 #ff0000) 。 
rgb_number 规定 颜色 值 为 rgb 代码 的 边框 颜色 (比如 rgb(255,0,0)) 。 
transparent 默认 值 。 边 框 颜色 为 透明 。 

inherit 规定 应 该 从 父 元 素 继承 边框 颜色 。 


44 


TIY 实例 


EDAH E 


本 例 演示 如 何 设置 四 个 边框 的 颜色 。 可 以 设置 一 到 四 种 颜色 。 
«html» 
«head» 


«style type="text/css"> 
p.one 


{ 

border-style: solid; 
border-color: #0000ff 
p . two 

border-style: solid; 


border-color: #ff0000 #0000ff 


} 
p.three 


t 

border-style: solid; 

border-color: #ff0000 #00ff00 #0000ff 
p.four 


border-style: solid; 
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) 


A 

</head> 

<body> 

«p class="one">0ne-colored border !</p> 

«p class="two">Two-colored border !</p> 

«p class="three">Three-colored border !</p> 

<p class="four">Four-colored border !</p> 

<p><b> 注 释 : </b>"border-width" 属性 如 果 单 独 使 用 的 话 是 不 会 起 作用 的 。 请 首先 使 用 "border-style" 属性 来 


«/body» 
</html> 


s ESSEN 








相关 页 面 
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HTML DOM 参考 手册 : borderColor 属性 


CSS border-left 属性 


例 


设置 左边 框 的 样式 : 


将 


t 

border-style:solid; 
border-left:thick double £ff0000; 
} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-left 属性 。 

注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1E8 需要 IDOCTYPE, IE9 支持 
"inherit", 

EE 、 N 

border-left 简写 属性 把 左边 框 的 所 有 属性 设置 到 一 个 声明 中 。 

可 以 按 顺 序 设置 如 下 属性 : 


e border-left-width 
e border-left-style 
e border-left-color 


如 果 不 设置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 border-leftsolid #ff0000; 也 是 允许 的 。 


默认 值 : not specified 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderLeft-"3px solid blue" 


可 能 的 值 


值 描述 
border-left-width 规定 左边 框 的 宽度 。 参 阅 : border-left-width 中 可 能 的 值 。 
border-left-style 规定 左边 框 的 样式 。 人 参阅 : border-left-style 中 可 能 的 值 。 
border-left-color 规定 左边 框 的 颜色 。 参 阅 : border-left-color 中 可 能 的 值 。 
inherit 规定 应 该 从 父 元 素 继承 border-left 属性 的 设置 。 





TIY 实例 


所 有 左边 框 属性 在 一 个 声明 之 中 
所 有 左边 框 属性 在 一 个 声明 之 中 


«html» 

«head» 

«style type="text/css"> 
p 

t 


border-style:solid; 
border-left:thick double Zff0000; 


«/style» 
«/head» 


«body» 
<p>This is some text in a paragraph.«/p» 


«/body» 
</html> 


相关 页 面 
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W3School CSS 参考 手册 


HTML DOM 参考 手册 : borderLeft 属性 


CSS border-left 属性 
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CSS border-left-color 属性 


实例 
设置 左边 框 的 颜色 : 
p 


t 
border-style:solid; 
border-left-color:Zff0000; 


| Jt da SHE 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-left-color 属性 。 
注释 : Internet Explorer 6 (以 及 更 早 的 版 本 ) 不 支持 属性 值 "transparent"。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1E8 需要 IDOCTYPE, IE9 支持 
"inherit", 


= 、 : 
border-left-color 设置 元 素 的 左边 框 的 颜色 。 


只 能 定义 纯色 ， 而 且 只 有 当 边 框 的 样式 是 一 个 非 none 或 hidden 的 值 时 边框 才 可 能 出 现 。 


注释 : 请 始终 把 border-style 属性 声明 到 border-color 属性 之 前 。 元 素 必 须 在 您 改变 其 颜色 之 
前 获得 边框 。 


默认 值 : not specified 


JavaScript 语法 : object.style.borderLeftColor-"blue" 


可 能 的 值 


值 
color name 
hex number 
rgb number 
transparent 


inherit 


M 


TIY 实例 


设置 左边 框 的 颜色 


描述 
规定 颜色 值 为 颜色 名 称 的 边框 颜色 (比如 red) 。 
规定 颜色 值 为 十 六 进 制 值 的 边框 颜色 (比如 #f0000) 。 
规定 颜色 值 为 rgb 代码 的 边框 颜色 〈 比 如 rgb(255,0,0)) 。 
默认 值 。 边 框 颜色 为 透明 。 
规定 应 该 从 父 元 素 继承 边框 颜色 。 


本 例 演示 如 何 设置 左边 框 的 颜色 。 


«html» 
«head» 


«style type="text/css"> 
p 


t 
border-style: solid; 


border-left-color: 


} 
</style> 
</head> 


<body> 


<p>Some text.</p> 


</body> 


«/html» 


相关 页 面 


#ff0000 


CSS 教程 CSS 边框 


CSS 参考 手册 : border-left 属性 


HTML DOM 参考 手册 : borderLeftColor 属性 


CSS border-left-style 属性 


例 


设置 左边 框 的 样式 : 


将 


1 

border-style:solid; 
border-left-style:dotted; 
} 


| Jt da SHE 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-left-style 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IEB) 都 不 支持 属性 值 "inherit" 或 "hidden", 


= 、 S 
border-left-style 设置 元 素 左 边框 的 样式 。 
只 有 当 这 个 值 不 是 none 时 边框 地 可 能 出 现 。 


f£ CSS1 rh, HTML 用 户 代 理 只 需 支持 solid 和 none, 


默认 值 : not specified 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderLeftStyle-"dotted" 


可 能 的 值 


值 描述 


none 定义 无 边框 。 

hidden "none" 相同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边框 冲突 。 
dotted 义 点 状 边 框 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

dashed ”定义 虚线 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

solid 定义 实 线 。 


double 定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 。 

groove ”定义 3D 凹 槽 边框 。 其 效果 取决 于 border-color 的 值 。 
ridge 定义 3D 到 状 边 框 。 其 效果 取决 于 border-color 的 值 。 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 。 
outset 定义 3D outset 边框 。 其 效果 取决 于 border-color 的 值 。 
inherit 规定 应 该 从 父 元 素 继 承 边框 样式 。 


TIY 实例 


设置 左边 框 的 样式 
本 例 演示 如 何 设置 左边 框 的 样式 。 


«html» 
«head» 
«style type="text/css"> 


border-style:solid; 


.none ([border-left-style:nonej 
.dotted [border-left-style:dotted) 
.dashed [border-left-style:dashed) 
.solid [border-left-style:solid) 
.double [border-left-style:doublej 
.groove (border-left-style:groovej 
.ridge [border-left-style:ridgej 
.inset ([border-left-style:inset) 
.Outset [border-left-style:outset) 
«/style» 

</head> 


T OUG O O OO O O 


<body> 

«p class="none">No left border .</p> 

«p class="dotted">A dotted left border .</p> 
«p class="dashed">A dashed left border .</p> 
«p class="solid">A solid left border .</p> 
«p class="double">A double left border .</p> 
«p class="groove">A groove left border .</p> 
«p class="ridge">A ridge left border .</p> 
«p class="inset">An inset left border .</p> 
«p class-"outset"»An outset left border .</p> 
</body> 

</html> 


相关 页 面 


CSS 教程 : CSS 边框 
CSS 参考 手册 : border-left 属性 


HTML DOM 参考 手册 : borderLeftStyle 属性 


CSS border-left-width 属性 


{ 

border-style:solid; 
border-left-width:15px; 
} 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-left-width 属性 。 
注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1IE8 需要 !DOCTYPE。1IE9 支持 


"inherit", 


定义 和 用 法 
border-left-width 属性 设置 元 素 的 左边 框 的 宽度 。 


只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 重 置 为 
0。 不 允许 指定 负 长 度 值 。 


注释 : 请 始终 在 border-left-width 属性 之 前 声明 border-style 属性 。 元 素 只 有 在 获得 边框 之 
E, + 能 改变 其 边 a NEBS 宽度 。 


默认 值 : medium 
继承 性 : no 


JavaScript 语法 : object.style.borderLeftWidth-"thick" 


可 能 的 值 


值 描述 
thin 定义 细 的 左边 框 。 
medium 默认 值 。 定 义 中 等 的 左边 框 。 
thick 定义 粗 的 左边 框 。 
length 允许 您 自 定义 左边 框 的 宽度 。 
inherit 规定 应 该 从 父 元 素 继承 边框 宽度 。 


4 


TIY 实例 


设置 左边 框 的 宽度 


u 


本 例 演示 如 何 设置 左边 框 的 宽度 。 


«html» 

«head» 

«style type="text/css"> 
p.one 

t 

border-style: solid; 
border-left-width: 15px 
} 

p.two 


border-style: solid; 
border-left-width: thin 


} 
</style> 
</head> 
<body> 


«p class="one"><b> 注 释 : «/b»"border-left-width" 属性 如 果 单 独 使 用 的 话 是 不 会 起 作用 的 。 请 首先 使 用 "bc 
«p class-"two"»Some text. Some more text.</p> 


</body> 
</html> 


E — — 


相关 页 面 
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CSS 参考 手册 : border-left 属性 


HTML DOM 参考 手册 : borderLeftWidth 属性 


CSS border-right 属性 


例 


设置 右边 框 的 样式 : 


将 


{ 
border-style:solid; 
border-right:thick double #ff0000; 


| EAFF 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-right 属性 。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1E8 需要 IDOCTYPE, IE9 支持 
"inherit", 


c. : 
border-right 简写 属性 把 右边 框 的 所 有 属性 设置 到 一 个 声明 中 。 


可 以 按 顺序 设置 如 下 属性 : 


e border-right-width 
e border-right-style 
e border-right-color 


如 果 不 设置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 border-right:solid #ff0000; 也 是 允许 的 。 


默认 值 : not specified 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderRight-"3px solid blue" 


可 能 的 值 


值 描述 


border-right-width 规定 右边 框 的 宽度 。 人 参阅 : border-right-width 中 可 能 的 值 。 
border-right-style 规定 右边 框 的 样式 。 参 阅 : border-right-style 中 可 能 的 值 。 
border-right-color 规定 右边 框 的 颜色 。 参 阅 : border-right-color 中 可 能 的 值 。 
inherit 规定 应 该 从 父 元 素 继承 border-right 属性 的 设置 。 





TIY 实例 


所 有 右边 框 属性 在 一 个 声明 之 中 
本 例 演示 一 个 简写 属性 ， 用 于 把 所 有 右边 框 属性 设置 在 一 条 声明 中 。 


«html» 

«head» 

«style type="text/css"> 
p 


t 
border-style:solid; 
border-right:thick double £ff0000; 


«/style» 
</head> 


<body> 
<p>This is some text in a paragraph.</p> 


</body> 
</html> 


相关 页 面 
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W3School CSS 参考 手册 


HTML DOM 参考 手册 : borderRight 属性 


CSS border-right 属性 


93 


CSS border-right-color 属性 


实例 


设置 右边 框 的 颜色 : 


"Xy 


{ 
border-style:solid; 
border-right-color :#ff0000; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-right-color 属性 。 
注释 : Internet Explorer 6 (以 及 更 早 的 版 本 ) 不 支持 属性 值 "transparent"。 
注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"; IEB 8832 IDOCTYPE, IE9 支持 


"inherit", 


定义 和 用 法 


border-right-color 设置 元 素 的 右边 框 的 颜色 。 


只 能 定义 纯色 ， 而 且 只 有 当 边 框 的 样式 是 一 个 非 none 或 hidden 的 值 时 边框 才 可 能 出 现 。 
注释 : Mo border-style 属性 声明 到 border-color 属性 之 前 。 元 素 必 须 在 您 改变 其 颜色 之 
前 获得 边框 。 
默认 值 : not specified 
继承 性 : no 
版 本 : CSS1 


JavaScript 语法 : object.style.borderRightColor-"blue" 


可 能 的 值 


值 
color name 
hex number 
rgb number 
transparent 


inherit 


M 


TIY 实例 


设置 右边 框 的 颜色 


描述 
规定 颜色 值 为 颜色 名 称 的 边框 颜色 (比如 red) 。 
规定 颜色 值 为 十 六 进 制 值 的 边框 颜色 (比如 #f0000) 。 
规定 颜色 值 为 rgb 代码 的 边框 颜色 〈 比 如 rgb(255,0,0)) 。 
默认 值 。 边 框 颜色 为 透明 。 
规定 应 该 从 父 元 素 继承 边框 颜色 。 


本 例 演示 如 何 设置 右边 框 的 颜色 。 


«html» 
«head» 


«style type="text/css"> 
p 


t 
border-style: solid; 
border-right-color: #ff0000 


} 
</style> 
</head> 


<body> 


<p>Some text.</p> 


</body> 


«/html» 


相关 页 面 
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CSS 参考 手册 : border-right 属性 


HTML DOM 参考 手册 : borderRightColor 属性 


CSS border-right-style 属性 


例 


设置 右边 框 的 样式 : 


将 


{ 
border-style:solid; 
border-right-style:dotted; 


| Jt da SHE 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-right-style 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit" 或 "hidden", 


= 、 S 
border-right-style 设置 元 素 右 边框 的 样式 。 


只 有 当 这 个 值 不 是 none 时 边框 才 可 能 出 现 。 


f£ CSS1 rh, HTML 用 户 代 理 只 需 支持 solid 和 none, 


默认 值 : not specified 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderRightStyle-"dotted" 


可 能 的 值 


值 描述 
none 定义 无 边框 。 
hidden ， 与 "none" 相同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边框 冲突 。 
dotted 定义 点 状 边 框 。 在 大 多 数 浏览 器 中 呈现 为 实 线 。 
dashed ”定义 虚线 。 在 大 多 数 浏览 器 中 呈现 为 实 线 。 
solid 定义 实 线 。 
double 定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 。 
groove ”定义 3D 凹 槽 边框 。 其 效果 取决 于 border-color 的 值 。 
ridge 定义 3D 到 状 边 框 。 其 效果 取决 于 border-color 的 值 。 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 。 
outset 定义 3D outset 边框 。 其 效果 取决 于 border-color 的 值 。 
inherit ”规定 应 该 从 父 元 素 继承 边框 样式 。 


TIY 实例 


设置 右边 框 的 样式 
本 例 演示 如 何 设置 右边 框 的 样式 。 


<!DOCTYPE html» 


«html» 

«head» 

«style type="text/css"> 

.dotted [border-right-style: dotted) 
.dashed [border-right-style: dashed) 
.solid [border-right-style: solid) 
.double [border-right-style: double} 
.groove ([border-right-style: groove} 
.ridge [border-right-style: ridge} 
.inset [border-right-style: inset} 
.Outset [border-right-style: outset) 
</style> 

</head> 


IJ OU OU OUO OU 


«body» 
«p class-"dotted"»A dotted border</p> 


«p class-"dashed"»A dashed border</p> 
«p class-"solid"»A solid border</p> 
«p class-"double"»A double border</p> 
«p class-"groove"»2A groove border</p> 
«p class-"ridge"»A ridge border</p> 
«p class-"inset"»An inset border</p> 
«p class-"outset"»An outset border«/p» 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 边框 
CSS 参考 手册 : border-right 属性 


HTML DOM 参考 手册 : borderRightStyle 属性 


CSS border-right-width 属性 


{ 
border-style:solid; 
border-right-width:15px; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-right-width 属性 。 
注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1IE8 需要 !DOCTYPE。1IE9 支持 


"inherit", 


定义 和 用 法 
border-right-width 属性 设置 元 素 的 右边 框 的 宽度 。 


只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 重 置 为 
0。 不 允许 指定 负 长 度 值 。 


注释 : 请 始终 在 border-right-width 属性 之 前 声明 border-style 属性 。 元 素 只 有 在 获得 边框 之 
后 ， 才 能 改变 其 边框 的 宽度 。 


默认 值 : medium 
继承 性 : no 


JavaScript 语法 : object.style.borderRightWidth-"thick" 


可 能 的 值 


值 描述 
thin 定义 细 的 右边 框 。 
medium 默认 值 。 定 义 中 等 的 右边 框 。 
thick 定义 粗 的 右边 框 。 
length 允许 您 自 定义 右边 框 的 宽度 。 
inherit 规定 应 该 从 父 元 素 继承 边框 宽度 。 


4 


TIY 实例 


设置 右边 框 的 宽度 


u 


本 例 演示 如 何 设置 右边 框 的 宽度 。 


«html» 

«head» 

«style type="text/css"> 
p.one 

t 

border-style: solid; 
border-right-width: 15px 
} 

p.two 

{ 

border-style: solid; 
border-right-width: thin 
} 

</style> 

</head> 

<body> 


«p class="one"><b> 注 释 : </b>"border-right-width" 属性 如 果 单 独 使 用 的 话 是 不 会 起 作用 的 。 请 首先 使 用 "UI 
<p class="two">Some text. Some more text.</p> 


</body> 
</html> 


Ei — &ķ& 
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CSS 参考 手册 : border-right 属性 


HTML DOM 参考 手册 : borderRightWidth 属性 


CSS border-style 属性 


{ 
border-style:solid; 


浏览 器 支持 
IE Firefox Chrome Safari 


所 有 浏览 器 都 支持 border-style 属性 。 


Opera 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit" 或 "hidden", 


定义 和 用 法 


border-style 属性 用 于 设置 元 素 所 有 边框 的 样式 ， 或 者 单独 地 为 各 边 设置 边框 样式 。 


只 有 当 这 个 值 不 是 none 时 边框 地 可 能 出 现 。 
例子 1 


border-style:dotted solid double dashed; 


。 上 边框 是 点 状 
e 右边 框 是 实 线 
。 下 边框 是 双 线 
。 左边 框 是 虚线 

例子 2 


border-style:dotted solid double; 


。 上 边框 是 点 状 


。 右边 框 和 左边 框 是 实 线 
。 下 边框 是 双 线 
例子 3 


border-style:dotted solid; 


。 上 边框 和 下 边框 是 点 状 
。 右边 框 和 左边 框 是 实 线 


border-style:dotted; 


。 所 有 4 个 边框 都 是 点 状 


默认 值 : 
继承 性 : 


JavaScript 语法 : 


可 能 的 值 


not specified 


object.style.borderStyle-"dotted double 


值 描述 
none 定义 无 边框 。 
hidden ， 与 "none" 相同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边框 冲突 。 
dotted 定义 点 状 边 框 。 在 大 多 数 浏览 器 中 呈现 为 实 线 。 
dashed ”定义 虚线 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 
solid 定义 实 线 。 
double 定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 。 
groove | 定义 3D 凹 槽 边框 。 其 效果 取决 于 border-color 的 值 。 
ridge 定义 3D 到 状 边 框 。 其 效果 取决 于 border-color 的 值 。 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 。 
outset 定义 3D outset 边框 。 其 效果 取决 于 border-color 的 值 。 
inherit ”规定 应 该 从 父 元 素 继承 边框 样式 。 


摘 述 
最 不 可 预测 的 边框 样式 是 double。 它 定义 为 两 条 线 的 宽度 再 加 上 这 po a 
border-width 值 。 不 过 ，CSS 规范 并 没有 说 其 中 一 条 线 是 否 比 另 一 条 粗 或 者 两 条 线 是 否 应 该 


是 一 样 的 粗 ， 也 没有 指出 线 之 间 的 空间 是 否 应 当 比 线 粗 。 所 有 这 些 都 有 用 PRERE, 创作 
人 员 对 这 个 决定 没有 任何 影响 。 


TIY 实例 


设置 四 边框 样式 
本 例 演示 如 何 设置 四 边框 样式 。 


«html» 
«head» 
«style type="text/css"> 


p.dotted ([border-style: dotted} 
p.dashed [border-style: dashed} 
p.solid (border-style: solid} 
p.double [([border-style: double} 
p.groove {border-style: groove} 
p.ridge (border-style: ridge} 
p.inset (border-style: inset) 
p.outset [border-style: outset} 
«/style» 

</head> 

<body> 


<p class="dotted">A dotted border</p> 
<p class="dashed">A dashed border</p> 
<p class="solid">A solid border</p> 

<p class="double">A double border</p> 
<p class="groove">A groove border</p> 
<p class="ridge">A ridge border</p> 

<p class="inset">An inset border</p> 


<p class="outset">An outset border</p> 
</body> 


</html> 


RES i BA [n] in HE 


本 例 演示 如 何在 元 素 的 各 边 设置 不 同 的 边框 。 


«html» 

«head» 

«style type="text/css"> 

p.soliddouble (border-style: solid double} 
p.doublesolid (border-style: double solid} 
p.groovedouble (border-style: groove double} 
p.three (border-style: solid double groove} 
«/style» 

</head> 


<body> 
<p class="soliddouble">Some text</p> 


<p class="doublesolid">Some text</p> 
<p class="groovedouble">Some text</p> 


<p class="three">Some text</p> 
</body> 


</html> 


相关 页 面 
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CSS border-style 属性 105 


CSS border-top 属性 


例 


设置 上 边框 的 样式 : 


将 


{ 

border-style:solid; 
border-top:thick double #ff0000; 
} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-top 属性 。 

注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1IE8 需要 !DOCTYPE。1IE9 支持 
"inherit", 

EE 、 N 

border-top 简写 属性 把 上 边框 的 所 有 属性 设置 到 一 个 声明 中 。 

可 以 按 顺序 设置 如 下 属性 : 


e border-top-width 
e border-top-style 
e border-top-color 


如 果 不 设 置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 border-top:solid 2ff0000; 也 是 允许 的 。 


默认 值 : not specified 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderTop-"3px solid blue" 


可 能 的 值 


值 描述 





border-top-width 规定 上 边框 的 宽度 。 人 参阅 : border-top-width 中 可 能 的 值 。 
border-top-style MEERE. £j: border-top-style 中 可 能 的 值 。 
border-top-color 规定 上 边框 的 颜色 。 人 参阅 : border-top-color 中 可 能 的 值 。 
inherit 规定 应 该 从 父 元 素 继 承 border-top 属性 的 设置 。 


TIY 实例 


所 有 上 边框 属性 在 一 个 声明 之 中 
本 例 演示 用 简写 属性 来 将 所 有 上 边框 属性 设置 于 同一 声明 之 中 。 


«html» 

«head» 

«style type="text/css"> 

p 

1 

border-style:solid; 
border-top:thick double #ff0000 


«/style» 
</head> 


<body> 
<p>This is some text in a paragraph.</p> 
</body> 


</html> 
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CSS border-top 属性 108 


CSS border-top-color 属性 


实例 
设置 上 边框 的 颜色 : 
p 


{ 
border-style:solid; 
border-top-color:zff0000; 


| Jt da SHE 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-top-color 属性 。 
注释 : Internet Explorer 6 (以 及 更 早 的 版 本 ) 不 支持 属性 值 "transparent"。 


注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1E8 需要 IDOCTYPE, IE9 支持 
"inherit", 


= 、 : 
border-top-color 设置 元 素 的 上 边框 的 颜色 。 


只 能 定义 纯色 ， 而 且 只 有 当 边 框 的 样式 是 一 个 非 none 或 hidden 的 值 时 边框 才 可 能 出 现 。 


注释 : 请 始终 把 border-style 属性 声明 到 border-color 属性 之 前 。 元 素 必 须 在 您 改变 其 颜色 之 
前 获得 边框 。 


默认 值 : not specified 


JavaScript 语法 : object.style.borderTopColor-"blue" 


可 能 的 值 


值 
color name 
hex number 
rgb number 
transparent 


inherit 


M 


TIY 实例 


设置 上 边框 的 颜色 


描述 
规定 颜色 值 为 颜色 名 称 的 边框 颜色 (比如 red) 。 
规定 颜色 值 为 十 六 进 制 值 的 边框 颜色 (比如 #f0000) 。 
规定 颜色 值 为 rgb 代码 的 边框 颜色 〈 比 如 rgb(255,0,0)) 。 
默认 值 。 边 框 颜色 为 透明 。 
规定 应 该 从 父 元 素 继承 边框 颜色 。 


本 例 演示 如 何 设置 上 边框 的 颜色 。 


«html» 
«head» 


«style type="text/css"> 
p 


t 
border-style: solid; 
border-top-color: £ff0000 


} 
</style> 
</head> 


<body> 


<p>Some text.</p> 


</body> 


«/html» 


相关 页 面 
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CSS 参考 手册 : border-top 属性 


HTML DOM 参考 手册 : borderTopColor 属性 


CSS border-top-style 属性 


例 


设置 上 边框 的 样式 : 


将 


{ 
border-style:solid; 
border-top-style:dotted; 


| Jt da SHE 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-top-style 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit" 或 "hidden", 


= 、 S 
border-top-style 设置 元 素 上 边框 的 样式 。 


只 有 当 这 个 值 不 是 none 时 边框 才 可 能 出 现 。 


f£ CSS1 rh, HTML 用 户 代 理 只 需 支持 solid 和 none, 


默认 值 : not specified 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.borderTopStyle-"dotted" 


可 能 的 值 


值 描述 


none 定义 无 边框 。 

hidden "none" 相同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边框 冲突 。 
dotted 义 点 状 边 框 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

dashed ”定义 虚线 。 在 大 多 数 浏 览 器 中 呈现 为 实 线 。 

solid 定义 实 线 。 


double 定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 。 

groove ”定义 3D 凹 槽 边框 。 其 效果 取决 于 border-color 的 值 。 
ridge 定义 3D 到 状 边 框 。 其 效果 取决 于 border-color 的 值 。 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 。 
outset 定义 3D outset 边框 。 其 效果 取决 于 border-color 的 值 。 
inherit 规定 应 该 从 父 元 素 继 承 边框 样式 。 


TIY 实例 


设置 上 边框 的 样式 
本 例 演示 如 何 设置 上 边框 的 样式 。 


«html» 
«head» 
«style type="text/css"> 


border-style:solid; 


.none (border-top-style:nonej 
.dotted [border-top-style:dotted) 
.dashed [border-top-style:dashed) 
.solid (border-top-style:solid)j 
.double [border-top-style:double) 
.groove (border-top-style:groovej 
.ridge ([border-top-style:ridgej 
.inset ([border-top-style:insetj 
.Outset [border-top-style:outset) 
«/style» 

</head> 


T OUG O O OO O O 


<body> 

«p class="none">No top border .</p> 

«p class="dotted">A dotted top border .</p> 
«p class="dashed">A dashed top border .</p> 
«p class="solid">A solid top border .</p> 
«p class="double">A double top border .</p> 
«p class="groove">A groove top border .</p> 
«p class="ridge">A ridge top border .</p> 
«p class="inset">An inset top border .</p> 
«p class-"outset"»An outset top border .</p> 
</body> 

</html> 


相关 页 面 


CSS 教程 : CSS 边框 
CSS 参考 手册 : border-top 属性 


HTML DOM 参考 手册 : borderTopStyle 属性 


CSS border-top-width 属性 


{ 
border-style:solid; 
border-top-width:15px; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-top-width 属性 。 
注释 : IE7 以 及 更 早 版 本 的 浏览 器 不 支持 值 "inherit"。1IE8 需要 !DOCTYPE。1IE9 支持 


"inherit", 


= 、 S 
border-top-width 属性 设置 元 素 的 上 边框 的 宽度 。 


只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 重 置 为 
0。 不 允许 指定 负 长 度 值 。 


注释 : 请 始终 在 border-top-width 属性 之 前 声明 border-style 属性 。 元 素 只 有 在 获得 边框 之 
后 ， 才 能 改变 其 边框 的 宽度 。 


默认 值 : medium 
继承 性 : no 


JavaScript 语法 : object.style.borderTopWidth-"thick" 


可 能 的 值 


值 描述 
thin 定义 细 的 上 边框 。 
medium 默认 值 。 定 义 中 等 的 上 边框 。 
thick 定义 粗 的 上 边框 。 
length 允许 您 自 定义 上 边框 的 宽度 。 
inherit 规定 应 该 从 父 元 素 继承 边框 宽度 。 


4 


TIY 实例 


设置 上 边框 的 宽度 


u 


本 例 演示 如 何 设置 上 边框 的 宽度 。 


«html» 

«head» 

«style type="text/css"> 
p.one 

1 

border-style: solid; 
border-top-width: 15px 
} 

p.two 


border-style: solid; 

border-top-width: thin 

} 

</style> 

</head> 

<body> 

«p class="one"><b> 注 释 : </b>"border-top-width" 属性 如 果 单 独 使 用 的 话 是 不 会 起 作用 的 。 请 首先 使 用 "bor 
«p class="two">Some text. Some more text.«/p» 

«/body» 


«/html» 


" 一 一 一 
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CSS 参考 手册 : border-top 属性 


HTML DOM 参考 手册 : borderTopWidth 属性 


CSS border-width 属性 


{ 
border-style:solid; 
border-width:15px; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 border-width 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


m. : 
border-width 简写 属性 为 元 素 的 所 有 边框 设置 宽度 ， 或 者 单独 地 为 各 边 边框 设置 宽度 。 


只 有 当 边 框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 重 置 为 
0。 不 允许 指定 负 长 度 值 。 


例子 1 


border-width:thin medium thick 10px; 


。 上 边框 是 细 边 框 

。 右边 框 是 中 等 边框 

。 下 边框 是 粗 边框 

。 左边 框 是 10px 宽 的 边框 
例子 2 


border-width:thin medium thick; 


。 上 边框 是 10px 
e 右边 框 和 左边 框 是 中 等 边框 
e 下 边框 是 粗 边 框 


例子 3 


border-width:thin medium; 


。 上 边框 和 下 边框 是 细 边 框 
。 右边 框 和 左边 框 是 中 等 边框 


例子 4 


border-width:thin; 


默认 值 : medium 
继承 性 no 
版 本 CSS1 
JavaScript 语法 : object.style.borderWidth-"thin thick" 
2b 
可 能 的 值 
值 描述 
thin 定义 细 的 边框 。 
medium 默认 。 定 义 中 等 的 边框 。 
thick 定义 粗 的 边框 。 
length 允许 您 自 定义 边框 的 宽度 。 
inherit 规定 应 该 从 父 元 素 继 承 边框 宽度 。 
TIY 实例 


所 有 边框 宽度 属性 在 一 个 声明 之 中 


本 例 演示 用 简写 属性 来 将 所 有 边框 宽度 属性 设置 于 同一 声明 中 。 


«html» 
«head» 
«style type="text/css"> 
p.one 


border-style: solid; 
border-width: 5px 


} 
p. two 


border-style: solid; 
border-width: thick 

} 

p.three 

t 

border-style: solid; 
border-width: 5px 10px 

} 

p.four 

{ 

border-style: solid; 
border-width: 5px 10px 1px 
} 

p.five 

{ 

border-style: solid; 
border-width: 5px 10px 1px medium 


} 
</style> 
</head> 


<body> 

<p class="one">Some text</p> 
<p class="two">Some text</p> 
<p class="three">Some text</p> 
<p class="four">Some text</p> 
<p class="five">Some text</p> 


<p><b> 注 释 : «/b»"border-width" 属性 如 果 单 独 使 用 的 话 是 不 会 起 作用 的 。 请 首先 使 用 "border-style" 属性 来 
</body> 


</html> 


E Y E 
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HTML DOM 参考 手册 : borderWidth 属性 


CSS outline 属性 


实例 


设置 4 个 边框 的 样式 : 


t 
outline:#00FF00 dotted thick; 


浏览 器 支持 
所 有 浏览 器 都 支持 outline 属性 。 


注释 : 如 果 规 定 了 !IDOCTYPE， 则 IE8 支持 outline 属性 。 


定义 和 用 法 

outline (468) 是 绘制 于 元 素 周 围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 素 的 作 
用 。 

注释 : 轮廓 线 不 会 占据 空间 ， 也 不 一 定 是 矩形 。 

outline 简写 属性 在 一 个 声明 中 设置 所 有 的 轮廓 属性 。 

可 以 按 顺 序 设置 如 下 属性 : 


e outline-color 
e outline-style 
e outline-width 


如 果 不 设 置 其 中 的 某 个 值 ， 也 不 会 出 问题 ， 比 如 outline:solid 2ff0000; 也 是 允许 的 。 


默认 值 : invert none medium 


继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.outline="#0000FF dotted thin" 


可 能 的 值 


值 描述 


outline-color 规定 边框 的 颜色 。 参 阅 : outline-color 中 可 能 的 值 。 
outline-style 规定 边框 的 样式 。 参 阅 : outline-style 中 可 能 的 值 。 
outline-width 规定 边框 的 宽度 。 参 阅 : outline-width 中 可 能 的 值 。 
inherit 规定 应 该 从 父 元 素 继 承 outline 属性 的 设置 。 





TIY 实例 


ETRA AH 
本 例 演示 使 用 outline 属性 在 元 素 周 围 画 一 条 线 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm 
«html» 

«head» 

«style type="text/css"> 


p 


border:red solid thin; 
outline:#00ff00 dotted thick; 


} 
</style> 
</head> 


<body> 
<p><b> 注 释 : </b> 只 有 在 规定 了 !DOCTYPE 时 ，Internet Explorer 8 (以 及 更 高 版 本 ) 才 支 持 outline ÆI 


</body> 
«/html» 


E m a 
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W3School CSS 参考 手册 


HTML DOM 参考 手册 : outline 属性 


CSS outline 属性 124 


CSS outline-color 属性 


例 


设置 点 状 轮廓 的 颜色 : 


将 


{ 
outline-style:dotted; 
outline-color :#00ff00; 


浏览 器 支持 
所 有 浏览 器 都 支持 outline-color 属性 。 


注释 : 如 果 规 定 了 !IDOCTYPE， 则 IE8 支持 outline 属性 。 


m. : 
outline (轮廓 ) 是 绘制 于 元 素 周围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 素 的 作 
FH, outline 属性 可 设置 元 素 周围 的 轮廓 线 。 


注释 : 请 始终 在 outline-color 属性 之 前 声明 outline-style 属性 。 元 素 只 有 获得 轮廓 以 后 才能 改 
变 其 轮廓 的 颜色 。 


注释 : 轮廓 线 不 会 占据 空间 ， 也 不 一 定 是 矩形 。 


outline-color 属性 设置 一 个 元 素 整 个 轮廓 中 可 见 部 分 的 颜色 。 要 记 住 ， 轮 廓 的 样式 不 能 是 
none， 否 则 轮廓 不 会 出 现 。 


默认 值 : invert 
继承 性 : no 


JavaScript 语法 : object.style.outlineColor="#0000F F" 


可 能 的 值 


值 描述 
color name  ， 规 定 颜色 值 为 颜色 名 称 的 轮廓 颜色 (比如 red) 。 
hex number ， 规 定 颜 色 值 为 十 六 进 制 值 的 轮 廊 颜色 〈 比 如 4ff0000) 。 
rgb number ”规定 颜色 值 为 rgb 代码 的 轮廓 颜色 (上 比 如 rgb(255,0,0)) 。 
默认 。 执 行 颜色 反 转 〈 逆 向 的 颜色 ) 。 可 使 轮廓 在 不 同 的 背景 颜色 中 都 


invert EM 
inherit 规定 应 该 从 父 元 素 继承 轮廓 颜色 的 设置 


TIY 实例 


设 


置 轮廓 的 颜色 


本 例 演示 如 何 设置 轮廓 的 颜色 。 


E Ee EB 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm 
«html» 

«head» 

«style type="text/css"> 

p 


border:red solid thin; 
outline-style:dotted; 
outline-color:Z00ff00; 
} 

</style> 

</head> 


<body> 
<p><b> 注 释 : </b> 只 有 在 规定 了 !DOCTYPE 时 ，Internet Explorer 8 (以 及 更 高 版 本 ) xf outline-co. 
</body> 
</html> 
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CSS 参考 手册 : outline 属性 


HTML DOM 参考 手册 : outlineColor 属性 


CSS outline-style 属性 


例 


设置 轮廓 的 样式 : 


将 


outline-style:dotted; 
} 


浏览 器 支持 
所 有 浏览 器 都 支持 outline-style 属性 。 


注释 : 如 果 规 定 了 !IDOCTYPE， 则 IE8 支持 outline 属性 。 


ch 、 : 
outline-style 属性 用 于 设置 元 素 的 整个 轮廓 的 样式 。 样 式 不 能 是 none， 否 则 轮廓 不 会 出 现 。 


outline (轮廓 ) 是 绘制 于 元 素 周 围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 素 的 作 
FH, outline 属性 设置 元 素 周围 的 轮廓 线 。 


注释 : 请 始终 在 outline-color 属性 之 前 声明 outline-style 属性 。 元 素 只 有 获得 轮廓 以 后 才能 改 
变 其 轮 廊 的 颜色 。 


注释 : 轮廓 线 不 会 占据 空间 ， 也 不 一 定 是 矩形 。 


默认 值 : none 
继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.outlineStyle-"dotted" 


可 能 的 值 


值 描述 
none 默认 。 定 义 无 轮廓 。 
dotted 定义 点 状 的 轮廓 。 
dashed 定义 虚线 轮廓 。 
solid 定义 实 线 轮廓 。 
double 定义 双 线 轮廓 。 双 线 的 宽度 等 同 于 outline-width 的 值 。 
groove 定义 3D 凹 槽 轮廓 。 此 效果 取决 于 outline-color 值 。 
ridge 定义 3D 凸 槽 轮廓 。 此 效果 取决 于 outline-color 值 。 
inset 定义 3D 四 边 轮廓 。 此 效果 取决 于 outline-color 值 。 
outset 定义 3D 凸 边 轮 廓 。 此 效果 取决 于 outline-color 值 。 
inherit 规定 应 该 从 父 元 素 继 承 轮廓 祥 式 的 设置 。 


TIY 实例 


设置 轮廓 的 样式 


本 例 演示 如 何 设置 轮廓 的 样式 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm 
«html» 

«head» 

«style type="text/css"> 

p 

t 


border: red solid thin; 


H 
p.dotted [outline-style: dotted) 
p.dashed [outline-style: dashed) 
p.solid ([outline-style: solid} 
p.double {outline-style: double} 
p.groove {outline-style: groove) 
p.ridge ([outline-style: ridge} 
p.inset ([outline-style: inset} 
p.outset [outline-style: outset) 
</style> 

</head> 

<body> 


<p class="dotted">A dotted outline</p> 
<p class="dashed">A dashed outline</p> 
<p class="solid">A solid outline</p> 
<p class="double">A double outline</p> 
<p class="groove">A groove outline</p> 
<p class="ridge">A ridge outline</p> 
<p class="inset">An inset outline</p> 
<p class="outset">An outset outline</p> 


<p><b> 注 释 : </b> 只 有 在 规定 了 !DOCTYPE #ł, Internet Explorer 8 (以 及 更 高 版 本 ) x5 outline-st' 
«/body» 
«/html» 
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HTML DOM 参考 手册 : outlineStyle 属性 


CSS outline-width 属性 


例 


设置 点 状 轮廓 的 颜色 : 


将 


{ 
outline-style:dotted; 
outline-width:5px; 


浏览 器 支持 
所 有 浏览 器 都 支持 outline-width 属性 。 


注释 : 如 果 规 定 了 !IDOCTYPE， 则 IE8 支持 outline 属性 。 


中 、 : 
outline-width 属性 设置 元 素 整 个 轮廓 的 宽度 ， 只 有 当 轮 廓 样式 不 是 none 时 ， 这 个 宽度 才 会 起 
作用 。 如 果 样 式 为 none， 宽 度 实际 上 会 重 置 为 0。 不 人 允许 设置 负 长 度 值 。 


outline (轮廓 ) 是 绘制 于 元 素 周 围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ， 可 起 到 突出 元 素 的 作 
用 。outline 属性 设置 元 素 周围 的 轮廓 线 。 


注释 : 请 始终 在 outline-width 属性 之 前 声明 outline-style 属性 。 元 素 只 有 获得 轮廓 以 后 才能 
改变 其 轮廓 的 颜色 。 


注释 : 轮廓 线 不 会 占据 空间 ， 也 不 一 定 是 矩形 。 
默认 值 : medium 


继承 性 : no 


JavaScript 语法 : object.style.outlineWidth="thin" 


可 能 的 值 


值 描述 
thin 规定 细 轮 廓 。 
medium 默认 。 规 定 中 等 的 轮廓 。 
thick 规定 粗 的 轮廓 。 
length 允许 您 规定 轮廓 粗细 的 值 。 
inherit 规定 应 该 从 父 元 素 继承 轮廓 宽度 的 设置 。 


TIY 实例 


设置 轮廓 的 宽度 


本 例 演示 如 何 设置 轮廓 的 宽度 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm 
«html» 

«head» 

«style type="text/css"> 
p.one 

{ 

border:red solid thin; 
outline-style:solid; 
outline-width:thin; 

} 

p.two 

{ 

border:red solid thin; 
outline-style:dotted; 
outline-width:3px; 


} 
</style> 
</head> 
<body> 


<p class="one">This is some text in a paragraph.</p> 
<p class="two">This is some text in a paragraph.</p> 


<p><b> 注 释 : </b> 只 有 在 规定 了 !DOCTYPE 时 ，Internet Explorer 8 (以 及 更 高 版 本 ) 才 支 持 outline-wi 
</body> 
«/html» 


E RÀ 
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CSS 参考 手册 : outline 属性 


HTML DOM 参考 手册 : outlineWidth 属性 


CSS3 border-bottom-left-radius 属性 


实例 
向 div 元 素 的 左下 角 添加 国 角 边框 : 


div 

t 

border:2px solid; 
border-bottom-left-radius:2em; 


} 
M 大 口 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
IE9+、Firefox 4+、Chrome、Safari 5+ 以 及 Opera 支持 border-bottom-left-radius 属性 。 
rm. N 


border-bottom-left-radius 属性 定义 左下 角 边 框 的 形状 。 


提示 : 该 属性 允许 您 向 元 素 添加 圆 角 边框 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderBottomLeftRadius-"5px" 


语法 


border-bottom-left-radius: length | ?& [ length | 96 ]; 





注释 : border-bottom-left-radius 属性 的 长 度 值 和 百分比 值 定义 四 分 之 一 椭圆 (定义 外 部 边框 
边缘 的 边 角 形 状 ) 的 半径 (radi) 。 第 一 个 值 是 水 平 半 径 ， 第 二 个 值 是 垂直 半径 。 如 果 省 略 第 
二 个 值 ， 则 复制 第 一 个 值 。 如 果 长 度 为 需 ， 则 边 角 为 方形 ， 而 不 是 圆 形 。 水 平 半 径 的 百分比 
值 参考 边框 盒 的 宽度 ， 而 垂直 半径 的 百分比 值 参 考 边 框 盒 的 高 度 。 


值 描述 测试 
length 定义 左下 角 的 形状 。 测试 
96 以 百分比 值 定义 左下 角 的 形状 。 测试 


相关 页 面 
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CSS3 border-bottom-right-radius 属性 


实例 
向 div 元 素 的 右 下 角 添 加 圆 角 边框 : 


div 
{ 


border:2px solid; 
border-bottom-right-radius:2em; 


J 
M 大 口 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
IE9+、Firefox 4+、Chrome、Safari 5+ 以 及 Opera 支持 border-bottom-right-radius 属性 。 
rm . N 


border-bottom-right-radius 属性 定义 右 下 角 边 框 的 形状 。 


提示 : 该 属性 允许 您 向 元 素 添加 圆 角 边框 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderBottomRightRadius="5px" 


语法 


border-bottom-right-radius: length | ?& [ length | ?6 ]; 





注释 : border-bottom-right-radius 属性 的 长 度 值 和 百分比 值 定义 四 分 之 一 椭圆 (定义 外 部 边框 
边缘 的 边 角 形 状 ) 的 半径 (radi) 。 第 一 个 值 是 水 平 半 径 ， 第 二 个 值 是 垂直 半径 。 如 果 省 略 第 
二 个 值 ， 则 复制 第 一 个 值 。 如 果 长 度 为 需 ， 则 边 角 为 方形 ， 而 不 是 圆 形 。 水 平 半 径 的 百分比 
值 参考 边框 盒 的 宽度 ， 而 垂直 半径 的 百分比 值 参 考 边 框 盒 的 高 度 。 


值 描述 测试 
length 定义 右 下 角 的 形状 。 测试 
% 以 百分比 值 定义 右 下 角 的 形状 。 测试 


相关 页 面 
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CSS3 border-image 属性 


实例 

RS 

将 图 片 规定 为 包围 div 元 素 的 边框 : 
div 
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ 
-0-border-image:url(border.png) 30 30 round; /* Opera */ 


border-image:url(border.png) 30 30 round; 
} 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 11, Firefox, Opera 15, Chrome 以 及 Safari 6 支持 border-image 属性 。 


Safari 5 支持 替代 的 -webkit-border-image 属性 。 


rr . N 
border-image 属性 是 一 个 简写 属性 ， 用 于 设置 以 下 属性 : 


e border-image-source 
e border-image-slice 
e border-image-width 
e border-image-outset 
e border-image-repeat 


如 果 省 略 值 ， 会 设置 其 默认 值 。 


提示 : 请 使 用 border-image-* 属性 来 构造 漂亮 的 可 伸缩 按钮 ! 


默认 值 : none 100% 1 0 stretch 


JavaScript 语法 : object.style.borderlmage-"url(border.png) 30 30 round" 


可 能 的 值 


值 描述 测 
试 
border-image- . , 
7 SJ IA s a 

source 用 在 边框 的 图 片 的 路 径 
border-image- H 
slice 片 边框 向 内 偏 移 。 
border-image- 、 " 
width 片 边框 的 宽度 。 
border-image- : P . Tm 
outset 边框 图 像 区 域 超出 边框 的 量 。 
border-image- 像 边框 是 否 应 平 铺 (repeated)、 铺 满 (rounded) 或 拉 伸 测 
repeat (stretched)。 M 


亲 目 试 一 试 - 实例 
Border-image 按钮 


本 例 演 示 如 何 通过 border-image 属性 来 创建 按钮。 


<!DOCTYPE html» 
«html» 

«head» 

«style» 

div 


border:10px solid transparent; 

width:40px; 

padding:5px 10px; 

-moz-border-image: url(/i/border image button.png) © 14 © 14 stretch; /* 老 版 本 的 Firefox 
-webkit-border-image: url(/i/border image button.png) © 14 © 14 stretch; /* Safari */ 
-o-border-image: url(/i/border image button.png) © 14 © 14 stretch; /* Opera */ 
border-image: url(/i/border image button.png) © 14 © 14 stretch; 


«/style» 

«/head» 

«body» 

<p><b> 注 释 : «/b»Internet Explorer 不 支持 border-image Blt, </p> 


«div»Search«/div» 


<p> 这 是 我 们 使 用 的 图 片 : </p> 
«img src-"/i/border image button.png"» 


«/body» 
</html> 


p E] 
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CSS3 border-image-outset 属性 


实例 


设置 border-image-outset 属性 : 
div 


border-image-source: url(border.png); 
border-image-outset: 30 30; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Opera 不 支持 border-image-outset 属性 。 
Internet Explorer 10 以 及 更 早 的 版 本 不 支持 border-image-outset 属性 。 
Safari 5 以 及 更 早 的 版 本 不 支持 border-image-outset 属性 。 


请 参阅 border-image 属性 。 


定义 和 用 法 


border-image-outset 属性 规定 边框 图 像 超 过 边框 盒 的 量 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderlmageOutset-"30 30" 


可 能 的 值 


border-image-outset: length | number ; 





注释 : border-image-outset 属性 规定 边框 图 像 超 出 边框 盒 的 量 。 在 上 、 右 、 下 、 左 侧 。 如 果 
忽略 第 四 个 值 ， 则 与 第 二 个 值 相 同 。 如 果 省 略 第 三 个 值 ， 则 和 与 第 一 个 值 相 同 。 如 果 省 略 第 二 
个 值 ， 则 和 与 第 一 个 值 相同 。 不 允许 任何 负 值 作为 border-image-outset 值 。 


值 描述 
length 
number 代表 对 应 的 border-width 的 倍数 。 


相关 页 面 
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CSS3 border-image-repeat 属性 


实例 
规定 如 何 重复 图 像 边框 : 
div 


border-image-source: url(border.png); 
border-image-repeat: round; 


M 1% 口 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
Opera 不 支持 border-image-repeat 属性 。 
Internet Explorer 10 以 及 更 早 的 版 本 不 支持 border-image-repeat 属性 。 


Safari 5 以 及 更 早 的 版 本 不 支持 border-image-repeat 属性 。 


请 参阅 border-image 属性 。 


定义 和 用 法 


border-image-repeat 属性 规定 图 像 边 框 是 否 应 该 被 重复 (repeated) 、 拉 伸 (stretched) 或 
铺 满 (rounded) 。 


默认 值 : stretch 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderlmageRepeat-"round" 


可 能 的 值 


border-image-repeat: stretch|repeat|round; 


注释 : 该 属性 规定 如 何 延 展 和 铺 排 边 框图 像 的 边缘 和 中 间 部 分 。 因 此 ， 您 可 以 规定 两 个 值 。 
如 果 省 略 第 二 个 值 ， 则 采取 与 第 一 个 值 相同 的 值 。 


t 描述 
stretch ” 拉 伸 图 像 来 填充 区 域 
repeat FA (重复 ) 图 像 来 填充 区 域 。 
round 类 似 repeat 值 。 如 果 无 法 完整 平 铺 所 有 图 像 ， 则 对 图 像 进行 缩放 以 适应 区 域 。 


相关 页 面 
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CSS3 border-image-slice 属性 


实例 
规定 图 像 边框 的 向 内 偏 移 : 
div 


border-image-source: url(border.png); 
border-image-slice: 5096 50%; 


浏览 器 支持 
IE Firefox Chrome Safari 


Opera 不 支持 border-image-slice 属性 。 
Internet Explorer 10 以 及 更 早 的 版 本 不 支持 border-image-slice 属性 。 
Safari 5 以 及 更 早 的 版 本 不 支持 border-image-slice 属性 。 


请 参阅 border-image 属性 。 


定义 和 用 法 


border-image-slice 属性 规定 图 像 边框 的 向 内 偏 移 。 


默认 值 : 100% 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderlmageSlice-"5096 50%" 


语法 


Opera 


border-image-slice: number |_%_|fil1， 


注释 : 该 属性 规定 图 像 的 上 、 右 、 下 、 左 侧 边 缘 的 向 内 偏 移 ， 图 像 被 分 割 为 九 个 区 域 : 四 个 
角 、 四 条 边 以 及 一 个 中 间 区 域 。 除 非 使 用 了 关键 词 出 ， 否 则 中 间 的 图 像 部 分 会 被 丢弃 。 如 果 
省 略 第 四 个 数值 /百分比 ， 则 与 第 二 个 值 相同 。 如 果 省 略 第 三 个 值 ， 则 与 第 一 个 值 相同 。 如 果 
省 略 第 二 个 值 ， 则 和 与 第 一 个 值 相同 。 


值 描述 
IE 数字 值 ， 代 表 图 像 中 像素 〈 如 果 是 光栅 图 像 ) 或 矢量 坐标 〈 如 果 是 矢量 图 
像 ) 。 
96 相对 于 图 像 尺 寸 的 百分比 值 : 图 像 的 宽度 影响 水 平 偏 移 ， 高 度 影响 垂直 偏 移 。 
fill 保留 边框 图 像 的 中 间 部 分 。 
相关 页 面 
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CSS3 border-image-source 属性 


实例 
使 用 一 幅 图 像 作为 围绕 div 元 素 的 边框 


div 


border-image-source: url(border.png); 


M 大 口 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
Opera 不 支持 border-image-source 属性 。 
Internet Explorer 10 以 及 更 早 的 版 本 不 支持 border-image-source 属性 。 


Safari 5 以 及 更 早 的 版 本 不 支持 border-image-source 属性 。 


请 参阅 border-image 属性 。 


me. : 
border-image-source 属性 规定 要 使 用 的 图 像 ， 代 蔡 border-style 属性 中 设置 的 边框 样式 。 


提示 : 如 果 值 为 "none"， 或 者 如 果 图 像 无 法 显示 ， 则 使 用 边框 样式 。 


默认 值 : none 
继承 性 : no 
版 本 : CSS3 
JavaScript 语法 : object.style.borderlmageSource-"url(border.png)" 


语法 


border-image-source: none| image ; 


值 
none 不 使 用 图 像 。 
image 用 作 边框 的 图 像 的 路 径 。 


相关 页 面 
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CSS3 border-image-width 属性 


实例 


div 


border-image-source: url(border.png); 
border-image-width: 30 30; 


浏览 器 支持 
IE Firefox Chrome Safari 


Opera 不 支持 border-image-width 属性 。 
Internet Explorer 10 以 及 更 早 的 版 本 不 支持 border-image-width 属性 。 
Safari 5 以 及 更 早 的 版 本 不 支持 border-image-width 属性 。 


请 参阅 border-image 属性 。 


定义 和 用 法 


border-image-width 属性 规定 图 像 边框 的 宽度 。 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderlmageWidth-"30 30" 


语法 


Opera 


border-image-width: _number_|_%_ |auto; 


注释 : border-image-width 属性 的 四 个 之 规定 将 边框 图 像 分 割 为 九 个 部 分 的 偏 移 。 它 们 代表 了 
从 区 域 的 上 、 右 、 下 、 左 侧 向 内 的 距离 。 如 果 忽 略 第 四 个 值 ， 则 与 第 二 个 值 相同 。 如 果 省 略 

第 三 个 值 ， 则 和 与 第 一 个 值 相同 。 如 果 省 略 第 二 个 值 ， 则 和 与 第 一 个 值 相同 。 不 允许 任何 负 值 作 

为 border-image-width 值 。 


值 描述 
number ”代表 对 应 的 border-width 的 倍数 。 
% 参考 边框 图 像 区 域 的 尺寸 : 区 域 的 高 度 影响 水 平 偏 移 ， 宽 度 影响 垂直 偏 移 。 
auto 如 果 规 定 该 属性 ， 则 宽度 为 对 应 的 图 像 切片 的 固有 宽度 。 


相关 页 面 
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CSS3 border-radius 属性 


实例 
向 div 元 素 添 加 圆 角 边框 : 


div 
{ 


border:2px solid; 
border-radius:25px; 


} 
页 面 底 部 有 更 多 实例 。 
浏览 器 支 持 
IE Firefox Chrome Safari 
IE9+、Firefox 4+、Chrome、Safari 5+ 以 及 Opera 支持 border-radius 属性 。 
定义 和 用 法 


border-radius 属性 是 一 个 简写 属性 ， 用 于 设置 四 个 border-*-radius 属性 。 


提示 : 该 属性 允许 您 为 元 素 添加 圆 角 边框 ! 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderRadius-"5px" 


语法 


Opera 


border-radius: _1-4 length | % / 1-4 length | % ; 


注释 : 按 此 顺序 设置 每 个 radii 的 四 个 值 。 如 果 省 略 bottom-left, w- top-right 相同 。 如 果 省 
略 bottom-right， 则 与 top-left 相同 。 如 果 省 略 top-right， 则 与 top-left 相同 。 


值 描述 测试 
length 定义 圆 角 的 形状 。 测试 
% 以 百分比 定义 圆 角 的 形状 。 测试 


例子 1 


border-radius:2em; 


border-top-left-radius:2em; 
border-top-right-radius:2em; 
border-bottom-right-radius:2em; 
border-bottom-left-radius:2em; 


例子 2 


border-radius: 2em 1em 4em / 0.5em 3em; 


border-top-left-radius: 2em 0.5em; 
border-top-right-radius: 1em 3em; 
border-bottom-right-radius: 4em 0.5em; 
border-bottom-left-radius: 1em 3em; 


相关 页 面 
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CSS3 border-top-left-radius 属性 


实例 
向 div 元 素 的 左上 角 添 加 国 角 边框 


div 
{ 


border:2px solid; 
border-top-left-radius:2em; 


} 
M 大 口 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
IE9+、Firefox 4+、Chrome、Safari 5+ 以 及 Opera 支持 border-top-left-radius 属性 。 
rm . N 


border-top-left-radius 属性 定义 左上 角 边 框 的 形状 。 


提示 : 该 属性 允许 您 向 元 素 添加 圆 角 边框 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderTopLeftRadius-"5px" 


语法 


border-bottom-right-radius: length | ?& [ length | ?6 ]; 





注释 : border-top-left-radius 属性 的 长 度 值 和 百分比 值 定义 四 分 之 一 椭圆 (定义 外 部 边框 边缘 
的 边 角 形 状 ) 的 半径 (radi) 。 第 一 个 值 是 水 平 半径 ， 第 二 个 值 是 垂直 半径 。 如 果 省 略 第 二 个 
值 ， 则 复制 第 一 个 值 。 如 果 长 度 为 震 ， 则 边 角 为 方形 ， 而 不 是 圆 形 。 水 平 半径 的 百分比 值 参 
考 边 框 盒 的 宽度 ， 而 垂直 半径 的 百分比 值 参 考 边 框 盒 的 高 度 。 


值 描述 测试 
length 定义 左下 角 的 形状 。 测试 
96 以 百分比 值 定义 左下 角 的 形状 。 测试 


相关 页 面 
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CSS3 border-top-right-radius 属性 


实例 
向 div 元 素 的 右上 角 添加 国 角 边框 : 


div 
1 


border:2px solid; 
border-top-right-radius:2em; 


} 


浏览 器 支持 


IE Firefox Chrome Safari 


Opera 


IE9+、Firefox 4+、Chrome、Safari 5+ 以 及 Opera 支持 border-top-right-radius 属性 。 


= 、 S 
border-top-right-radius 属性 定义 右 下 角 边 框 的 形状 。 


提示 : 该 属性 允许 您 向 元 素 添 加 圆 角 边框 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.borderTopRightRadius-"5px' 


语法 


border-top-right-radius: length | ?; [ length | ?6 ]; 





注释 : border-top-right-radius 属性 的 长 度 值 和 百分比 值 定义 四 分 之 一 椭圆 (定义 外 部 边框 边 

缘 的 边 角 形 状 ) 的 半径 (radi) 。 第 一 个 值 是 水 平 半 径 ， 第 二 个 值 是 垂直 半径 。 如 果 省 略 第 二 
个 值 ， 则 复制 第 一 个 值 。 如 果 长 度 为 需 ， 则 边 角 为 方形 ， 而 不 是 圆 形 。 水 平 半 径 的 百分比 值 

参考 边框 盒 的 宽度 ， 而 垂直 半径 的 百分比 值 参考 边框 盒 的 高 度 。 


tā 描述 测试 
length 定义 右上 角 的 形状 。 测试 
96 以 百分比 值 定 义 右 上 角 的 形状 。 测试 


相关 页 面 


CSS3 教程 : CSS3 边框 


CSS3 box-shadow 属性 


实例 
向 div 元 素 添 加 box-shadow : 


div 


{ 
box-shadow: 10px 10px 5px #888888; 
H 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 


IE Firefox Chrome 


IE9+、Firefox 4、Chrome、Opera 以 及 Safari 5.1.1 支持 box-shadow 属性 。 


定义 和 用 法 


box-shadow 属性 向 框 添加 一 个 或 多 个 阴影 。 


提示 : 请 使 用 border-image-* 属性 来 构造 漂亮 的 可 伸缩 按钮 ! 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.boxShadow-7"10px 10px 5px #888888" 


语法 


box-shadow: h-shadow _v-shadow blur spread 





Safari 


inset; 


Opera 


注释 : box-shadow 向 框 添 加 一 个 或 多 个 阴影 。 该 属性 是 由 逗号 分 隔 的 阴影 列表 ， 每 个 阴影 
2-4 个 长 度 值 、 可 选 的 颜色 值 以 及 可 选 的 inset 关键 词 来 规定 。 省 略 长 度 的 值 是 0。 











值 描述 测试 
h-shadow 必需 。 水 平 阴影 的 位 置 。 人 允许 负 值 。 测试 
v-shadow 必需 。 垂 直 阴 影 的 位 置 。 人 允许 负 值 。 测试 
blur 可 选 。 模 糊 距离 。 测试 
Spread 可 选 。 阴 影 的 尺寸 。 测试 
color 可 选 。 阴 影 的 颜色 。 请 参阅 CSS 颜色 值 。 测试 
inset 可 选 。 将 外 部 阴影 (outset) 改 为 内 部 阴影 。 测试 


亲 目 试 一 实例 
扔 到 桌子 上 面 的 图 片 


本 例 演示 如 何 创 建 “ 宝 丽 来 "图 片 ， 并 旋转 图 片 。 


<!DOCTYPE html» 

«html» 

«head» 

«style» 

body 

i rl 

margin:30px; 
background-color :#E9E9E9; 
} 


div.polaroid 


{ 

width:294px; 

padding:10px 10px 20px 10px; 
border:1px solid #BFBFBF; 
background-color :white,; 

/* Add box-shadow */ 
box-shadow:2px 2px 3px #aaaaaa; 


} 


div.rotate_left 


{ 

float:left; 

-ms-transform:rotate(7deg); /* IE 9 */ 
-moz-transform:rotate(7deg); /* Firefox */ 
-webkit-transform:rotate(7deg); /* Safari and Chrome */ 
-o-transform:rotate(7deg); /* Opera */ 
transform:rotate(7deg); 


} 


div.rotate_right 


{ 

float:left; 

-ms-transform:rotate(-8deg); /* IE 9 */ 
-moz-transform:rotate(-8deg); /* Firefox */ 
-webkit-transform:rotate(-8deg); /* Safari and Chrome */ 
-o-transform:rotate(-8deg); /* Opera */ 
transform:rotate(-8deg); 


} 
</style> 
</head> 
<body> 


<div class="polaroid rotate left"> 

«img srcz"/i/ballade dream.jpg" alt=" 郁 金 香 " width="284" height="213" /> 
«p class="caption"> 上 海鲜 花 港 的 郁金香 ， 花 名 : Ballade Dream, </p> 

</div> 


«div class-"polaroid rotate right"> 

«img src-"/i/china pavilion.jpg" alt=" 世 博 中 国 馆 " width="284" height-"213" /> 
«p class="caption'">2010 年 上 海 世博 会 ， 中 国 馆 。</p> 

«/div» 


«/body» 
</html> 


相关 页 面 


CSS3 教程 : CSS3 边框 


Box 属性 


属性 


overflow-x 


overflow-y 
overflow- 
style 
rotation 


rotation- 
point 


描述 


ZJo 


规定 渝 出 元 素 的 首选 滚动 方法 。 
围绕 由 rotation-point 属性 定义 的 点 对 元 素 进 行 旋转 。 


定义 距离 上 左边 框 边缘 的 偏 移 点 。 


如 果 内 容 渝 出 了 元 素 内 容 区域 ， 是 否 对 内 容 的 左 /右边 缘 进 行 裁 


如 果 内 容 浴 出 了 元 素 内 容 区 域 ， 是 否 对 内 容 的 上 /下 边缘 进行 裁 


CSS 


CSS3 overflow-x 属性 


实例 
83 div 元 素 中 内 容 的 左 /右边 缘 - 如 果 浴 出 元 素 的 内 容 区 域 的 话 : 


div 


overflow-x:hidden; 


浏览 器 文 持 


所 有 主流 浏览 器 都 支持 overflow-x 属性 。 

注释 : overflow-x 属性 无 法 在 IE8 以 及 更 早 的 浏览 器 正确 地 工作 。 

< 、 

overflow-x 属性 规定 是 否 对 内 容 的 左 / 右 边缘 进行 裁剪 - 如 果 浴 出 元 素 内 容 区 域 的 话 。 
提示 : 使 用 overflow-y 属性 来 确定 对 上 /下 边缘 的 裁剪 。 


默认 值 : visible 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.overflowX-"scroll" 


吾 法 


overflow-x: visible|hidden|scroll|auto|no-display|no-content; 


值 
visible 
hidden 
scroll 
auto 
no-display 


no-content 


描述 
不 裁剪 内 容 ， 可 能 会 显示 在 内 容 框 之 外 。 
裁剪 内 容 - 不 提供 滚动 机 制 。 
X53 PU - 提供 滚动 机 制 。 
如 果 浴 出 框 ， 则 应 该 提供 滚动 机 制 。 
如 果 内 容 不 适合 内 容 框 ， 则 删除 整个 框 。 
如 果 内 容 不 适合 内 容 框 ， 则 人 隆 藏 整个 内 容 。 








CSS3 overflow-y 属性 


实例 
83 div 元 素 中 内 容 的 左 /右边 缘 - 如 果 浴 出 元 素 的 内 容 区 域 的 话 : 


div 


overflow-y:hidden; 


浏览 器 文 持 


所 有 主流 浏览 器 都 支持 overflow-y 属性 。 

注释 : overflow-y 属性 无 法 在 IE8 以 及 更 早 的 浏览 器 正确 地 工作 。 

< 、 

overflow-y 属性 规定 是 否 对 内 容 的 上 /下 边缘 进行 裁剪 - 如 果 洽 出 元 素 内 容 区 域 的 话 。 


提示 : 使 用 overflow-x 属性 来 确定 对 左 /右边 缘 的 裁剪 。 


默认 值 : visible 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.overflowY="scroll" 


吾 法 


overflow-y: visible|hidden|scroll|auto|no-display|no-content; 


值 
visible 
hidden 
scroll 
auto 
no-display 


no-content 


描述 
不 裁剪 内 容 ， 可 能 会 显示 在 内 容 框 之 外 。 
裁剪 内 容 - 不 提供 滚动 机 制 。 
X53 PU - 提供 滚动 机 制 。 
如 果 浴 出 框 ， 则 应 该 提供 滚动 机 制 。 
如 果 内 容 不 适合 内 容 框 ， 则 删除 整个 框 。 
如 果 内 容 不 适合 内 容 框 ， 则 人 隆 藏 整个 内 容 。 








CSS3 overflow-style 属性 


4 


实例 


设置 渝 出 元 素 的 首选 滚动 方法 : 


u 


div 


overflow:auto; 
overflow-style:marquee,panner; 


浏览 器 支持 
目前 没有 浏览 器 支持 overflow-style 属性 。 
定义 和 用 法 


overflow-style 规定 浴 出 元 素 的 首选 滚动 方法 。 


默认 值 : auto 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.overflowStyle-"scrollbar" 


overflow-style: auto|scrollbar|panner |move|marquee; 


注释 : 值 既 可 以 是 auto， 或 者 是 按照 优先 次 序 的 方法 列表 。 浏 览 器 应 该 使 用 列表 中 其 支持 的 
的 第 一 个 滚动 方法 。 


值 
auto 
scrollbar 
panner 
move 


marquee 


A Y CH TUR S DER. ARo 


用 户 能 够 直接 移动 元 素 的 内 容 。 通 常 ， 用 户 能 够 用 最 标 拖 动 内 容 。 
内 容 自 主 移动 ， 不 需 任何 用 户 代 理 对 其 控制 。 


CSS3 rotation 属性 


将 h1 元 素 旋 转 180 度 〈 从 上 向 下 ) 


hi 


rotation-point:50?6 5096; 
rotation:180deg; 
} 


xx - nn 

浏览 器 支持 

目前 没有 浏览 器 支持 rotation 属性 。 

< 、 

rotation 属性 围绕 由 rotation-point 属性 定义 的 指定 点 ， 对 块 级 元 素 进 行 逆 时 针 旋 转 。 


提示 : 边框 、 内 边 距 、 内 容 以 及 背景 ( 非 固定 ) 也 会 被 旋转 ! 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.rotation-"180deg" 


语法 
语 》 
rotation: angle ; 


值 描述 
angle 元 素 旋 转角 度 。 可 能 的 值 : Odeg 到 360deg. 


CSS3 rotation-point 属性 


实例 
将 h1 元 素 施 转 180 度 从 上 向 下 ) 


hi 


rotation-point:50?6 5096; 
rotation:180deg; 


T - nn 

浏览 器 支持 

目前 没有 浏览 器 支持 rotation-point 属性 。 

ra 1 

rotation-point 属性 是 一 对 值 ， 定 义 从 上 左边 框 边 缘 进 行 偏 移 的 点 。 


提示 : rotation-point 属性 需要 与 rotation 属性 结合 使 用 。 


默认 值 : 50% 50% 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.rotationPoint="25% 2596" 


* 
> s, 
语 法 
rotation-point: value ; 


值 描述 


left top 

left center 

left bottom 
right top 

right center 
right bottom 
center top 
center center 
center bottom 


| 如 果 只 规定 一 个 关键 词 ， 则 第 二 个 值 将 


宽度 和 高 度 。 


EJ w 
AE 


center", 


||x?6 y% | 百分比 值 ， 参 考 边 框 盒 


Color 属性 


属性 
color-profile 
opacity 


rendering-intent 


允许 使 用 源 的 颜色 配置 文件 的 默认 以 外 的 规范 。 
规定 书签 的 级 别 。 
允许 使 用 颜色 配置 文件 泻 染 意 图 的 默认 以 外 的 规范 。 


CSS 


CSS3 opacity 属性 


实例 
设置 div 元 素 的 不 透明 级 别 : 


div 


opacity:0.5; 
您 可 以 在 本 页 底部 找到 更 多 实例 。 


浏览 器 支持 
所 有 浏览 器 都 支持 opacity 属性 。 
注释 : IE8 以 及 更 早 的 版 本 支持 替代 的 filter 属性 。 例 如 : filter:Alpha(opacity=50)。 


= 、 N 
opacity 属性 设置 元 素 的 不 透明 级 别 。 
默认 值 : 1 
继承 性 : no 
版 本 : CSS3 
JavaScript 语法 : object.style.opacity-0.5 


语法 


opacity: value |inherit; 


值 描述 测试 
value 规定 不 透明 度 。 从 0.0 “完全 透明 ) 到 1.0 (完全 不 透明 ) 。 测试 
inherit 应 该 从 父 元 素 继承 opacity 属性 的 值 。 


亲自 试 一 试 - 实例 
改变 元 素 的 不 透明 度 
本 例 演示 如 何 使 用 JavaScript 来 改变 元 素 的 不 透明 度 。 


<!DOCTYPE html» 

«html» 

«head» 

«script» 

function ChangeOpacity(x) 


{ 

// 返回 被 选 选 项 的 文本 

var opacity-x.options[x.selectedIndex].text; 

var el-document.getElementById("p1"); 

if (el.style.opacity!--undefined) 
[el.style.opacity-opacity;) 

else 
(alert("Your browser doesn't support this example!");} 

} 


</script> 
</head> 
<body> 


«p id="p1"> 请 从 下 面 的 例子 中 选择 一 个 值 ， 以 改变 此 元 素 的 不 透明 度 。</p> 
«select onchange="Change0pacity(this);" size="5"> 

<option />0 

<option />0.2 

<option />0.5 

<option />0.8 

<option selected="selected" />1 
</select> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 图 像 透明 度 


Content for Paged Media 属性 


属性 
bookmark-label 
bookmark-level 
bookmark-target 
float-offset 
hyphenate-after 
hyphenate-before 


hyphenate- 
character 


hyphenate-lines 


hyphenate- 
resource 


hyphens 
image-resolution 
marks 


string-set 


描述 
规定 书签 的 标记 。 
规定 书签 的 级 别 。 
规定 书签 链接 的 目标 。 
将 元 素 放 在 float 属性 通常 放置 的 位 置 的 相反 方向 。 
规定 连 字 单 词 中 连 字符 之 后 的 最 小 字符 数 。 
规定 连 字 单 词 中 连 字符 之 前 的 最 小 字符 数 。 
规定 当 发 生 断 字 时 显示 的 字符 串 。 


指示 元 素 中 连续 断 字 连 线 的 最 大 数 。 


规定 帮助 浏览 器 确定 断 字 点 的 外 部 资源 (逗号 分 隔 的 列 
KR) 。 


设置 如 何 对 单词 进行 拆 分 ， 以 改善 段落 的 布局 。 
规定 图 像 的 正确 分 辩 率 。 

向 文档 添加 裁 切 标记 或 十 字 标 记 。 

3 


CSS 尺寸 属性 (Dimension) 


CSS 


属性 


height 


max-height 


max-width 


min-height 


min-width 


width 


CSS height 属性 


height:100px; 
width:100px; 
} 


浏览 器 支持 
IE Firefox Chrome 


所 有 主流 浏览 器 都 支持 height 属性 。 


注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
height 属性 设置 元 素 的 高 度 。 


说 明 


Safari 


Opera 


这 个 属性 定义 元 素 内 容 区 的 高 度 ， 在 内 容 区 外 面 可 以 增加 内 边 距 、 边 框 和 外 边 距 。 


行内 非 蔡 换 元 素 会 忽略 这 个 属性 。 


默认 值 : 
继承 性 : no 


版 本 : CSS1 


auto 


JavaScript 语法 : object.style.height-"50px" 


可 能 的 值 


值 描述 
auto 默认 。 浏 览 器 会 计算 出 实际 的 高 度 。 
length 使 用 px、cm 等 单位 定义 高 度 。 

% 基于 包含 它 的 块 级 对 象 的 百分比 高 度 。 
inherit 规定 应 该 从 父 元 素 继 承 height 属性 的 值 。 


44 


TIY 实例 


使 用 像素 值 设置 图 像 的 高 度 
本 例 演示 如 何 使 用 像素 值 设置 元 素 的 高 度 。 


«html» 

«head» 

«style type="text/css"> 
img.normal 


height: auto 
H 


img.big 

{ 

height: 160px 
} 

img.small 

t 

height: 30px 
} 


</style> 
</head> 
<body> 


«img class-"normal" src="/i/eg smile.gif" /> 
«br /» 

«img class-"big" src="/i/eg_ smile.gif" /> 
«br /» 

«img class-"small" src-z"/i/eg smile.gif" /> 


«/body» 
</html> 


使 用 百分比 设置 图 像 的 高 度 
本 例 演示 如 何 使 用 百分比 值 来 设置 元 素 的 高 度 。 


«html» 

«head» 

«style type="text/css"> 
img.normal 


height: auto 
} 


img.big 


height: 5096 

} 

img.small 

{ 

height: 10% 

} 

</style> 

</head> 

<body> 

<img class-"normal" src="/i/eg_smile.gif" /> 
<br /> 

«img class="big" src="/i/eg_smile.gif" /> 
<br /> 


«img class-"small" src="/i/eg_smile.gif" /> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 尺寸 
CSS 教程 : CSS 框 模型 概述 
CSS 参考 手册 : width 属性 


HTML DOM 参考 手册 : height 属性 


CSS max-height 属性 


max-height:100px; 
} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 max-height 属性 。 
注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
max-height 属性 设置 元 素 的 最 大 高 度 。 
说 明 


该 属性 值 会 对 元 素 的 高 度 设置 一 个 最 高 限制 。 因 此 ， 元 素 可 以 比 指定 值 矮 ， 但 不 能 比 其 高 。 
不 允许 指定 负 值 。 


注释 : max-height 属性 不 包括 外 边 距 、 边 框 和 内 边 距 。 


默认 值 : none 
继承 性 : no 


JavaScript 语法 : object.style.maxHeight-"50px" 


可 能 的 值 


值 描述 
none 默认 。 定 义 对 元 素 被 允许 的 最 大 高 度 没 有 限制 。 
length 定义 元 素 的 最 大 高 度 值 。 
?6 定义 基于 包含 它 的 块 级 对 象 的 百分比 最 大 高 度 。 
inherit 规定 应 该 从 父 元 素 继 承 max-height 属性 的 值 。 


44 


TIY 实例 


设置 元 素 的 最 大 高 度 


本 例 演示 如 何 设置 一 个 元 素 的 最 大 高 度 。 


«html» 

«head» 

«style type="text/css"> 
p 


max-height: 10px 


} 
</style> 
</head> 
<body> 


<p> 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。</p> 


这 是 
这 是 
这 是 
这 是 


«img src-"/i/eg smile.gif" /> 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 尺寸 
CSS 教程 : min-height 属性 


HTML DOM 参考 手册 : maxHeight 属性 


CSS max-width 属性 


实例 
设置 段落 的 最 大 党 度 


max -width:100px; 


浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 max-width 属性 。 
注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
max-width 定义 元 素 的 最 大 宽度 。 
说 明 


该 属性 值 会 对 元 素 的 宽度 设置 一 个 最 高 限制 。 因 此 ， 元 素 可 以 比 指定 值 窗 ， 但 不 能 比 其 宽 。 
不 允许 指定 负 值 。 


默认 值 : none 


继承 性 : no 


JavaScript 语法 : object.style.maxWidth="50px" 


可 能 的 值 


值 描述 
none 默认 。 定 义 对 元 素 的 最 大 宽度 没有 限制 。 
length 定义 元 素 的 最 大 宽度 值 
% 定义 基于 包含 它 的 块 级 对 象 的 百分比 最 大 宽度 。 
inherit 规定 应 该 从 父 元 素 继承 max-width 属性 的 值 。 


TIY 实例 


使 用 像素 值 来 设置 元 素 的 最 大 宽度 
本 例 演示 如 何 使 用 像素 值 来 设置 元 素 的 最 大 高 度 。 


«html» 

«head» 

«style type="text/css"> 
p 


max-width: 300px 
} 

</style> 

</head> 

<body> 


<p> 这 是 一 些 文 本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 
这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。</p> 


</body> 
</html> 


使 用 百分比 来 设置 元 素 的 最 大 宽度 
本 例 演示 如 何 使 用 百分比 值 来 设置 元 素 的 最 大 高 度 。 


«html» 

«head» 

«style type="text/css"> 
p 


1 

max-width: 5096 
} 

</style> 
</head> 


<body> 


<p> 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 


这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文 本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 

这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。</p> 
</body> 

«/html» 


相关 页 面 


CSS 教程 : CSS 尺寸 
CSS 参考 手册 : CSS min-width 属性 


HTML DOM 参考 手册 : maxWidth 属性 


CSS min-height 属性 


min-height:100px; 


浏览 絮 支 持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 min-height 属性 。 
注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
min-height 属性 设置 元 素 的 最 小 高 度 。 
说 明 


该 属性 值 会 对 元 素 的 高 度 设置 一 个 最 低 限 制 。 因 此 ， 元 素 可 以 比 指定 值 高 ， 但 不 能 比 其 矮 。 
不 允许 指定 负 值 。 


默认 值 : 0 
继承 性 : no 


JavaScript 语法 : object.style.minHeight-"50px" 


可 能 的 值 


值 描述 
length 定义 元 素 的 最 小 高 度 。 上 默认 值 是 0。 
% 定义 基于 包含 它 的 块 级 对 象 的 百分比 最 小 高 度 。 
inherit 规定 应 该 从 父 元 素 继 承 min-height 属性 的 值 。 


TIY 实例 


使 用 像素 值 来 设置 元 素 的 最 小 高 度 
本 例 演示 如 何 使 用 像素 值 来 设置 元 素 的 最 小 高 度 。 


«html» 

«head» 

«style type="text/css"> 
p 


1 

min-height: 100px 

Jj 

«/style» 

«/head» 

«body» 

<p> 这 是 一 些 文本 。 zE Bkk, E EKA 
RENA 这 是 一 些 文本 。 这 是 一 些 文本 。 
一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
E Dd ee 
一 些 广 本。 这 是 一 些 文本 。 这 是 一 些 文本 。</p> 


<img src="/i/eg_smile.gif" /> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 尺寸 
CSS 教程 : max-height 属性 


HTML DOM 参考 手册 : minHeight 属性 


CSS min-width 属性 


min-width:100px; 


浏览 絮 支 持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 min-width 属性 。 
注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
min-width 属性 设置 元 素 的 最 小 宽度 。 
说 明 


该 属性 值 会 对 元 素 的 宽度 设置 一 个 最 小 限制 。 因 此 ， 元 素 可 以 比 指定 值 宽 ， 但 不 能 比 其 窒 。 
不 允许 指定 负 值 。 


默认 值 : none 


继承 性 : no 


JavaScript 语法 : object.style.minWidth-"50px" 


可 能 的 值 


值 描述 
length 定义 元 素 的 最 小 宽度 值 。 默 认 值 : 取决 于 浏览 
?6 定义 基于 包含 它 的 块 级 对 象 的 百分比 最 小 宽度 。 
inherit 规定 应 该 从 父 元 素 继承 min-width 属性 的 值 。 


TIY 实例 


使 用 像素 值 来 设置 元 素 的 最 小 宽度 
本 例 演示 如 何 使 用 像素 值 来 设置 元 素 的 最 小 宽度 。 


«html» 

«head» 

«style type="text/css"> 
p 


t 

min-width: 1000px 

H 

«/style» 

</head> 

<body> 

<p> 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。 

一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文 本 。</p> 


«img src="/i/eg_smile.gif" /> 


</body> 
</html> 


使 用 百分比 来 设置 元 素 的 最 小 宽度 
本 例 演示 如 何 使 用 百分比 值 来 设置 元 素 的 最 小 宽度 。 


«html» 

«head» 

«style type="text/css"> 
p 


min-width: 20096 


} 
</style> 
</head> 
<body> 


<p> 这 是 一 些 文本 。 这 是 一 些 文本 。 这 是 一 些 文本 。 
三 些 交 本 本 这 是 三 些 文 本 本 这 是 三 些 广 本。 
-Ere EE IESU, E Eae 
Zyka Se e ÉÉSUM, 
-tyh e E e Ea «/p» 


并 H ji 


«img src="/i/eg_smile.gif" /> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 尺寸 
CSS 参考 手册 : CSS max-width 属性 


HTML DOM 参考 手册 : minWidth 属性 


CSS width 属性 


height:100px; 
width:100px; 
} 


浏览 器 支持 
IE Firefox Chrome 


所 有 主流 浏览 器 都 支持 width 属性 。 


注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
width 属性 设置 元 素 的 宽度 。 


说 明 


Safari 


Opera 


这 个 属性 定义 元 素 内 容 区 的 宽度 ， 在 内 容 区 外 面 可 以 增加 内 边 距 、 边 框 和 外 边 距 。 


行内 非 蔡 换 元 素 会 忽略 这 个 属性 。 


默认 值 : 
继承 性 : no 


版 本 : CSS1 


auto 


JavaScript 语法 : object.style.width-"50px" 


可 能 的 值 


值 描述 
auto 默认 值 。 浏 览 器 可 计算 出 实际 的 宽度 。 
length 使 用 px. cm 等 单位 定义 宽度 。 
26 定义 基于 包含 块 〈 父 元 素 ) 宽度 的 百分比 宽度 。 
inherit 规定 应 该 从 父 元 素 继 承 width 属性 的 值 。 


Li 


TIY 实例 


使 用 像素 值 来 设置 元 素 的 宽度 
本 例 演示 如 何 使 用 像素 值 来 设置 元 素 的 宽度 。 


4, 


«html» 

«head» 

«style type="text/css"> 
img 


t 

width: 300px 
} 

</style> 
</head> 
<body> 


<img src="/i/eg_smile.gif" /> 


</body> 
</html> 


使 用 百分比 来 设置 元 素 的 宽度 
本 例 演示 如 何 使 用 百分比 值 来 设置 元 素 的 宽度 。 


«html» 

«head» 

«style type="text/css"> 
img 

t 

width: 5096 

} 

</style> 


</head> 
<body> 


<img src="/i/eg_smile.gif" /> 


</body> 
</html> 


相关 页 面 





W3School CSS 参考 手册 


CSS 教程 : CSS 尺寸 
CSS 教程 : CSS 框 模型 概述 
CSS 参考 手册 : height 属性 


HTML DOM 参考 手册 : width 属性 








CSS width 属性 185 


可 伸缩 框 属 性 (Flexible Box) 


属性 
box-align 
box-direction 
box-flex 
box-flex-group 
box-lines 
box-ordinal-group 
box-orient 


box-pack 


描述 


规定 如 何 对 齐 框 的 子 元 素 。 
规定 框 的 子 元 素 的 显示 方向 。 
规定 框 的 子 元 素 是 否 可 伸缩 。 


将 可 
L 定 当 超出 父 元 素 框 的 空间 时 ， 是 否 换行 显示 。 





规 


伸缩 元 素 分 配 到 柔性 分 组 。 


框 的 子 元 素 的 显示 次 序 。 


LE 
定 框 的 子 元 素 是 否 应 水 平 或 垂直 排列 。 
定 


水 平 框 中 的 水 平 位 置 或 者 垂直 框 中 的 垂直 位 置 。 


CSS 


C CO CQ CQ CQ mn C wm 


CSS3 box-align 属性 


通过 使 用 box-align and box-pack 属性 ， 居 中 div 框 的 子 元 素 : 


div 


{ 

width:350px; 

height :100px; 

border:1px solid black; 
/* Firefox */ 

display: -moz-box; 
-moz-box-pack:center; 
-moz-box-align:center; 

/* Safari, Opera 以 及 Chrome */ 
display: -webkit-box; 
-webkit-box-pack:center; 
-webkit-box-align:center; 
/* W3C */ 

display:box; 
box-pack:center; 
box-align:center; 


J 
页 面 底 部 有 更 多 实例 。 
浏览 器 支持 
目前 没有 浏览 器 支持 box-align 属性 。 


Firefox 支持 替代 的 -moz-box-align 属性 。 


Safari, Opera 以 及 Chrome 支持 蔡 代 的 -webkit-box-align 属性 。 


定义 和 用 法 


box-align 属性 规定 如 何 对 齐 框 的 子 元 素 。 


默认 值 : stretch 


继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.boxAlign-"center" 


* 
s, 
各 法 
box-align: start|end|center|baseline|stretch; 


值 描述 测试 
start 
对 于 正常 方向 的 框 ， 每 个 子 元 素 的 上 边缘 治 着 框 的 顶 边 放置 
对 于 反方 向 的 框 ， 每 个 子 元 素 的 下 边缘 治 着 框 的 底 边 放置 
| iux | | end | 
FEŻ DANIE, &RTFIUGRÉS Bin ACOEPEBSIÉ 2 IS. 
对 于 反方 向 的 框 ， 每 个 子 元 素 的 上 边缘 治 着 框 的 顶 边 放置 。 


| 测试 | | center | 均等 地 分 割 多 余 的 空间 ， 一 半 位 于 子 元 素 之 上 ， 另 一 半 位 于 子 元 素 之 下 。 | 
测试 | | baseline | 如 果 box-orient 是 inline-axis 或 horizontal， 所 有 子 元 素 均 与 其 基线 对 齐 。 | 
测试 | | stretch | 拉 伸 子 元 素 以 填充 包含 块 | 


亲 目 试 一 实例 


改变 元 素 的 box-align 值 


该 例 演示 如 何 使 用 JavaScript 来 改变 元 素 的 box-align 值 。 


<!DOCTYPE html» 
«html» 

«head» 

«style» 

.box 

t 

display: -moz-box; 
display: -webkit-box; 
display:box; 
width:200px; 
height:100px; 
border:2px solid red; 


«/style» 

«script» 

function ChangeBoxAlign(x) 

{ 

// Returns the selected option's text 

var boxAlign=x.options[x.selectedIndex].text; 
var div-document.getElementById("myDiv"); 

if (div.style.MozBoxAlign!--undefined) 


t 
div.style.MozBoxAlign-boxAlign; 


else if (div.style.webkitBoxAlign!--undefined) 
t 
div.style.webkitBoxAlign-boxAlign; 


} 


else 


alert("Your browser doesn't support this example!"); 
} 
} 
</script> 
</head> 
<body> 
<div class="box" id="myDiv"> 
<b> 第 一 个 子 元 素 </b> 
<i> 第 二 个 子 元 素 </i> 
</div> 


«select onchange="ChangeBoxAlign (this);" size="6"> 
<option selected="selected" />baseline 
<option />center 
<option />end 
<option />inherit 
<option />start 
<option />stretch 
</select> 


<p><b> 注 释 : </b> 本 例 在 Internet Explorer 和 Opera 中 无 效 。</p> 


</body> 
</html> 


CSS3 box-direction 属性 


实例 
以 反方 向 显示 div 框 的 子 元 素 : 


div 


t 

width:350px; 
height:100px; 
border:1px solid black; 


/* Firefox */ 
display: -moz-box; 
-moz-box-direction:reverse; 


/* Safari. Opera 以 及 Chrome */ 
display: -webkit-box; 
-webkit-box-direction:reverse; 


/* W3C */ 
display:box; 
box-direction:reverse; 


} 


浏览 器 支持 


目前 没有 浏览 器 支持 box-direction 属性 。 


Firefox 支持 替代 的 -moz-box-direction 属性 。 


Safari, Opera 以 及 Chrome 支持 替代 的 -webkit-box-direction 属性 。 


定义 和 用 法 


box-direction 属性 规定 框 元 素 的 子 元 素 以 什么 方向 来 排列 。 


默认 值 : 
继承 性 : 


JavaScript 语法 : 


normal 


object.style.boxDirection-"reverse" 


语法 


box-direction: 


值 
normal 
reverse 


inherit 


normal|reverse|inherit; 


以 默认 方向 显示 子 元 素 。 
以 反方 向 显示 子 元 素 。 
应 该 从 子 元 素 继 承 box-direction 属性 的 值 


测试 
测试 


测试 


CSS3 box-flex 属性 


实例 


定义 两 个 可 伸缩 的 p 元 素 。 如 果 父 元 素 的 总 宽度 是 300 像素 ， 则 #p1 的 宽度 是 100 像素 ， 而 
#p2 的 宽度 是 200 像素 : 


#p1 
-moz-box-flex:1.0; /* Firefox */ 
-webkit-box-flex:1.0; /* Safari 和 Chrome */ 


box-flex:1.0; 
border:1px solid red; 


} 
#p2 


-moz-box-flex:2.0; /* Firefox */ 
-webkit-box-flex:2.0; /* Safari 和 Chrome */ 
box-flex:2.0; 

border:1px solid blue; 


} 


浏览 器 支持 

目前 没有 浏览 器 支持 box-flex 属性 。 

Firefox 支持 替代 的 -moz-box-flex 属性 。 

Safari, Opera 以 及 Chrome 支持 替代 的 -webkit-box-flex 属性 。 


ri . s 
box-flex 属性 规定 框 的 子 元 素 是 否 可 伸缩 其 尺寸 。 


提示 : 可 伸缩 元 素 能 够 随 着 框 的 缩小 或 扩大 而 缩写 或 放大 。 只 要 框 中 有 多 余 的 空间 ， 可 伸缩 
元 素 就 会 扩展 来 填充 这 些 空间 。 


默认 值 : 


JavaScript 语法 : 


` 法 
D» 
box-flex: value ; 


值 


0.0 (指示 该 元 素 不 可 伸缩 ) 


object.style.boxFlex=2.0 


描述 


元 素 的 可 伸缩 行 。 柔 性 是 相对 的 ， 例 如 box-flex 为 2 的 子 元 素 两 倍 于 box-flex 


value — 为 1 的 子 元 素 。 


CSS3 box-flex-group 属性 


浏览 器 支持 

目前 没有 浏览 器 支持 box-flex-group 属性 。 

= . i 

box-flex-group 属性 用 于 向 柔性 分 组 分 配 可 伸缩 元 素 。 
提示 : 可 伸缩 元 素 能 够 随 着 框 的 缩小 和 扩大 而 伸缩 。 


默认 值 : 1 
继承 性 : no 
版 本 : CSS3 
JavaScript 语法 : object.style.boxFlexGroup-2 


语法 
D» 
box-flex-group: integer ; 


值 描述 
integer 一 个 整数 。 (第 一 个 柔性 分 组 是 1， 后 面 的 柔性 分 组 是 更 大 的 值 ) 。 


CSS3 box-lines 属性 


规定 允许 div 扩展 为 多 行 : 
div 
t 
display:box; 
box-orient:horizontal; 


box-lines:multiple; 
width:200px; 


浏览 器 支持 

目前 没有 浏览 器 支持 box-lines 属性 。 

= : 

box-lines 属性 规定 如 果 列 超出 了 父 框 中 的 空间 ， 是 否 要 换行 显示 。 


提示 : 默认 地 ， 水 平 框 会 在 单独 的 行 中 排列 其 子 元 素 ， 而 垂直 框 会 在 单独 的 列 中 排列 其 子 元 
素 。 


默认 值 : single 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.boxLines-"multiple" 


语法 


box-lines: single|multiple; 


值 描述 
single 所 有 子 元 素 会 被 放置 在 单独 的 行 或 列 中 。 (无 法 匹配 的 元 素 会 被 视 为 浴 出 ) 。 
multiple ”人 允许 框 扩展 为 多 行 ， 以 容纳 其 所 有 子 元 素 。 


CSS3 box-ordinal-group 属性 


实例 
规定 框 中 子 元 素 的 显示 次 序 : 


.box 


{ 

display:-moz-box; /* Firefox */ 
display:-webkit-box; /* Safari 和 Chrome */ 
display :box; 

border:1px solid black; 


.ord1 
{ 


margin:5px; 

-moz-box-ordinal-group:1; /* Firefox */ 
-webkit-box-ordinal-group:1; /* Safari 和 Chrome */ 
box-ordinal-group:1; 


} 
.Ord2 


{ 

margin:5px; 

-moz-box-ordinal-group:2; /* Firefox */ 
-webkit-box-ordinal-group:2; /* Safari 和 Chrome */ 
box-ordinal-group:2; 


} 


~“ - nn 

浏览 器 支持 

目前 没有 浏览 器 支持 box-ordinal-group 属性 。 
Firefox 支持 替代 的 -moz-box-ordinal-group 属性 。 


Safari 和 Chrome 支持 替代 的 -webkit-box-ordinal-group 属性 。 


ch 、 : 
box-ordinal-group 属性 规定 框 中 子 元 素 的 显示 次 序 。 

值 更 低 的 元 素 会 显示 在 值 更 高 的 元 素 前 面 显示 。 

注释 : 分 组 值 相 同 的 元 素 ， 它 们 的 显示 次 序 取决 于 其 源 次 序 。 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.boxOrdinalGroup-2 
语法 


box-ordinal-group: | integer ; 


值 描述 测试 


integer 一 个 整数 ， 指 示 子 元 素 的 显示 次 序 。 测试 


CSS3 box-orient 属性 


实例 
水 平 排列 div 元 素 的 子 元 素 : 


div 

t 

width:350px; 

height:100px; 

border:1px solid black; 

/* Firefox */ 

display: -moz-box; 
-moz-box-orient:horizontal; 

/* Safari. Opera 以 及 Chrome */ 
display: -webkit-box; 
-webkit-box-orient:horizontal; 
/* W3C */ 

display:box; 
box-orient:horizontal; 


} 


浏览 器 支持 
目前 没有 浏览 器 支持 box-orient 属性 。 
Firefox 支持 替代 的 -moz-box-orient 属性 。 


Safari, Opera 以 及 Chrome 支持 替代 的 -webkit-box-orient 属性 。 


定义 和 用 法 
box-orient 属性 规定 框 的 子 元 素 应 该 被 水 平 或 垂直 排列 。 


提示 : 水 平 框 中 的 子 元 素 从 左 向 右 进行 显示 ， 而 垂直 框 的 子 元 素 从 上 向 下 进行 显示 。 不 过 ， 
box-direction 和 box-ordinal-group 能 够 改变 这 种 顺序 。 


默认 值 : inline-axis 


JavaScript 语法 : 


语法 


object.style.boxOrient="vertical" 


box-orient: horizontal|vertical|inline-axis|block-axis|inherit; 


值 
horizontal 
vertical 
inline-axis 
block-axis 


inherit 








描述 测试 
在 水 平行 中 从 左 向 右 排 列子 元 素 。 测试 
从 上 向 下 垂直 排列 子 元 素 。 测试 
治 着 行内 轴 来 排列 子 元 素 (BRE horizontal) 。 测试 
治 着 块 轴 来 排列 子 元 素 (映射 为 vertical) 。 测试 


应 该 从 父 元 素 继承 box-orient 属性 的 值 。 


CSS3 box-pack 属性 


实例 
通过 一 起 使 用 box-align 和 box-pack 属性 ， 对 div 框 的 子 元 素 进行 居中 : 


div 


{ 

width:350px; 
height:100px; 

border:1px solid black; 
/* Firefox */ 

display: -moz-box; 
-moz-box-pack:center; 
-moz-box-align:center; 

/* Safari. Opera 以 及 Chrome */ 
display: -webkit-box; 
-webkit-box-pack:center; 
-webkit-box-align:center; 
/* W3C */ 

display:box; 
box-pack:center; 
box-align:center; 


} 


浏览 器 支持 
目前 没有 浏览 器 支持 box-pack 属性 。 
Firefox 支持 替代 的 -moz-box-pack 属性 。 


Safari, Opera 以 及 Chrome 支持 替代 的 -webkit-box-pack 属性 。 


r- . N 
box-pack 属性 规定 当 框 大 于 子 元 素 的 尺寸 ， 在 何 处 放置 子 元 素 。 
该 属性 规定 水 平 框 中 的 水 平 位 置 ， 以 及 垂直 框 中 的 垂直 位 置 。 


默认 值 : start 


继承 性 : no 

版 本 : CSS3 

JavaScript 语法 : object.style.boxPack-"center" 
语法 


box-pack: start|end|center | justify; 


值 描述 测试 
start 
对 于 正常 方向 的 框 ， 首 个 子 元 素 的 左边 缘 被 放 在 左 侧 〈 最 后 的 子 元 素 后 是 所 有 剩余 的 空间 ) 
对 于 相反 方向 的 框 ， 最 后 子 元 素 的 右边 缘 被 放 在 右 侧 〈 首 个 子 元 素 前 是 所 有 剩余 的 空间 ) 
| 测试 || end | 
对 于 正常 方向 的 框 ， 最 后 子 元 素 的 右边 缘 被 放 在 右 侧 〈 首 个 子 元 素 前 是 所 有 剩余 的 空间 ) 。 


对 于 相反 方向 的 框 ， 首 个 子 元 素 的 左边 缘 被 放 在 左 侧 (最 后 子 元 素 后 是 所 有 剩余 的 空间 ) o | 
测试 | | center | 均等 地 分 割 多 余 空间 ， 其 中 一 半空 间 被 置 于 首 个 子 元 素 前 ， 另 一 半 被 置 于 最 
后 一 个 子 元 素 后 | 测试 | | justify | 在 每 个 子 元 素 之 间 分 割 多 余 的 空间 ( 首 个 子 元 素 前 和 最 后 一 
个 子 元 素 后 没有 多 余 的 空间 ) 。 | 测试 | 


CSS 字体 属性 (Font) 


属性 描述 css 
font 在 一 个 声明 中 设置 所 有 字体 属性 。 1 
font-family 规定 文本 的 字体 系列 。 1 
font-size 规定 文本 的 字体 尺寸 。 1 
font-size-adjust 为 元 素 规 定 aspect 值 。 2 
font-stretch 收缩 或 拉 伸 当前 的 字体 系列 。 2 
font-style 规定 文本 的 字体 样式 。 1 
font-variant 规定 是 否 以 小 型 大 写字 母 的 字体 显示 文本 。 1 


font-weight 规定 字体 的 粗细 。 1 


CSS font 属性 


实例 
在 一 个 声明 中 设置 所 有 字体 属性 : 


p.exi 


font:italic arial,sans-serif; 


p.ex2 


font:italic bold 12px/20px arial,sans-serif; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 font 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
font 简写 属性 在 一 个 声明 中 设置 所 有 字体 属性 。 


注释 : 此 属性 也 有 第 六 个 值 : "ine-height"， 可 设置 行 间距 。 
说 明 


这 个 简写 属性 用 于 一 次 设置 元 素 字 体 的 两 个 或 更 多 方面 。 使 用 icon 等 关键 字 可 以 适当 地 设置 
元 素 的 字体 ， 使 之 与 用 户 计 算 机 环境 中 的 某 个 方面 一 致 。 注 意 ， 如 果 没 有 使 用 这 些 关键 词 ， 
至 少 要 指定 字体 大 小 和 字体 系列 。 


可 以 按 顺序 设置 如 下 属性 : 


e font-style 

e font-variant 

e font-weight 

e font-size/line-height 


e font-family 
可 以 不 设置 其 中 的 某 个 值 ， 比 如 font:100% verdana; 也 是 允许 的 。 未 设置 的 属性 会 使 用 其 默 
认 值 。 
默认 值 : not specified 
继承 性 : yes 


JavaScript 语法 : object.style.font-"italic small-caps bold 12px arial,sans-serif" 


可 能 的 值 





fü 描述 
font-style 规定 字体 样式 。 参 阅 : font-style 中 可 能 的 值 。 
font-variant 规定 字体 异体 。 参 阅 : font-variant 中 可 能 的 值 。 
font-weight 规定 字体 粗细 。 参 闵 : font-weight 中 可 能 的 值 。 
font-size/line- REFERIMIT S. AN : font-size 和 line-height 中 可 能 也 
height 值 。 
font-family 规定 字体 系列 。 参 阅 : font-family 中 可 能 的 值 。 
caption 定义 被 标题 控件 (比如 按钮 、 下 拉 列 表 等 ) 使 用 的 字体 。 
icon 定义 被 图 标 标记 使 用 的 字体 。 
menu 定义 被 下 拉 列 表 使 用 的 字体 。 
message-box 定义 被 对 话 框 使 用 的 字体 。 


small-caption 


status-bar 


caption 字体 的 小 型 版 本 。 
定义 被 窗口 状态 栏 使 用 的 字体 。 


TIY 实例 


所 有 字体 属性 在 一 个 声明 之 内 
本 例 演示 如 何 使 用 简写 属性 将 字体 属性 设置 在 一 个 声明 之 内 。 


«html» 
«head» 
«style type="text/css"> 
p.exi 


font:italic arial,sans-serif; 


} 


p.ex2 
font:italic bold 12px/30px arial, sans-serif; 


</style> 
</head> 


<body> 
«p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a p 
«p class-"ex2"»This is a paragraph. This is a paragraph. This is a paragraph. This is a p 
«/body» 
</html> 


E — 7 


设置 使 用 "caption" 值 的 段落 字体 





本 例 演示 如 何 设置 使 用 "caption" 值 的 段落 字体 。 


«html» 
«body» 


<p>This is a normal paragraph«/p» 
«p style="font: caption"»This is a paragraph with a "caption" font«/p» 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 字体 


HTML DOM 参考 手册 : font 属性 


CSS font-family 属性 


实例 


为 段落 设置 字体 : 


font-family:"Times New Roman",Georgia,Serif; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 font-family 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
font-family 规定 元 素 的 字体 系列 。 


font-family 可 以 把 多 个 字体 名 称 作为 一 个 “ 回 退 "系统 来 保存 。 如 果 浏 览 器 不 支持 第 一 个 字体 ， 
则 会 尝试 下 一 个 。 也 就 是 说 ，font-family 属性 的 值 是 用 于 某 个 元 素 的 字体 族 名 称 或 /及 类 族 名 
称 的 一 个 优先 表 。 浏 览 器 会 使 用 它 可 识别 的 第 一 个 值 。 


有 两 种 类 型 的 字体 系列 名 称 : 
e 指定 的 系列 名 称 : 具体 字体 的 名 称 ， 比 如 : "times", "courier", "arial", 


e 通常 字体 系列 名 称 : 比如 : "serif", "sans-serif", "cursive", "fantasy", "monospace" 
提示 : 使 用 逗号 分 割 每 个 值 ， 并 始终 提供 一 个 类 族 名 称 作 为 最 后 的 选择 。 


注意 : 使 用 某 种 特定 的 字体 系列 (Geneva) 完全 取决 于 用 户 机 器 上 该 字体 系列 是 否 可 用 ; 这 
个 属性 没有 指示 任何 字体 下 载 。 因 此 ， 强 烈 推 荐 使 用 一 个 通用 字体 系列 名 作为 后 路 。 


默认 值 : not specified 


继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.fontFamily-"arial,sans-serif" 


可 能 的 值 


b 
Bt 
rH 


e family-name 
e generic-family 


| 
用 于 某 个 元 素 的 字体 族 名 称 或 /及 类 族 名 称 的 一 个 优先 表 。 
默认 值 : 取决 于 浏览 器 。 


| | inherit | 规定 应 该 从 父 元 素 继 承 字 体系 列 。 | 


TIY 实例 


设置 文本 的 字体 
本 例 演示 如 何 设置 文本 字体 。 


«html» 

«head» 

«style type="text/css"> 

p.serif([font-family:"Times New Roman", Georgia, Serif} 
p.sansserif{font-family:Arial, Verdana, Sans-serif} 
</style> 

</head> 


<body> 

<h1>CSS font-family</h1> 

<p class="serif">This is a paragraph, shown in the Times New Roman font.</p> 
<p class="sansserif">This is a paragraph, shown in the Arial font.</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 


HTML DOM 参考 手册 : font 属性 


CSS font-size 属性 


设置 不 同 的 HTML 元 素 的 尺寸 : 


hi {font-size:250%;} 
h2 {font-size:200%;} 
p {font-size:100%} 


| EAFF 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 font-size 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
font-size 属性 可 设置 字体 的 尺寸 。 
说 明 


该 属性 设置 元 素 的 字体 大 小 。 注 意 ， 实 际 上 它 设置 的 是 字体 中 字符 框 的 高 度 ; 实际 的 字符 字 
形 可 能 比 这 些 框 高 或 矮 (通常 会 矮 ) 。 


备 关键 字 对 应 的 字体 必须 比 一 个 最 小 关键 字 相 应 字体 要 高 ， 并 且 要 小 于 下 一 个 最 大 关键 字 对 
应 的 字体 。 


默认 值 : medium 


JavaScript 语法 : object.style.fontSize-"larger" 


可 能 的 值 


e xx-small 
e x-small 
e small 

e medium 
e large 

e x-large 
e xx-large 


| 
把 字体 的 尺寸 设置 为 不 同 的 尺寸 ， 从 xx-small 到 xx-large. 
默认 值 : medium。 


| | smaller | 把 font-size 设置 为 比 父 元 素 更 小 的 尺寸 。 | | larger | 把 font-size 设置 为 比 父 元 素 
更 大 的 尺寸 。 | | /ength | 把 font-size 设置 为 一 个 固定 的 值 。 | | % | 把 font-size 设置 为 基于 父 
元 素 的 一 个 百分比 值 。 | | inherit | 规定 应 该 从 父 元 素 继承 字体 尺寸 。 | 


TIY 实例 


设置 字体 尺寸 


本 例 演示 如 何 设置 字体 尺寸 。 


«html» 

«head» 

«style type="text/css"> 
hi (font-size: 300%} 

h2 (font-size: 200%} 

p {font-size: 100%} 
</style> 

</head> 

<body> 

<h1>This is header 1</h1> 
<h2>This is header 2</h2> 
<p>This is a paragraph</p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 字体 


W3School CSS 参考 手册 


CSS 参考 手册 : CSS font 属性 


HTML DOM 参考 手册 : fontSize 属性 


CSS font-size 属性 212 





CSS font-size-adjust 属性 


设置 不 同 的 HTML 元 素 的 font-size-adjust 属性 : 


hi 


{ 
font-size-adjust:0.58; 


font-size-adjust:0.60; 


浏览 器 支持 


Internet Explorer 不 支持 font-size-adjust 属性 。 

ris. : 

定义 和 用 法 

font-size-adjust 属性 为 某 个 元 素 规定 一 个 aspect 值 ， 这 样 就 可 以 保持 首选 字体 的 x-height。 
说 明 


字体 的 小 写字 母 "x" 的 高 度 与 "font-size" 高 度 之 间 的 比率 被 称 为 一 个 字体 的 aspect 值 。 当 字 
体 拥有 高 的 aspect 值 时 ， 那 么 当 此 字体 被 设置 为 很 小 的 尺寸 时 会 更 易 阅 读 。 举 例 : Verdana 
的 aspect 值 是 0.58 (意味 着 当 字 体 尺 寸 为 100px 时 ， 它 的 x-height 是 58px ) 。Times New 
Roman 的 aspect 值 是 0.46。 这 就 意味 着 Verdana 在 小 尺寸 时 比 Times New Roman 更 易 阅 


sy 
To 


默认 值 : none 
继承 性 : yes 


JavaScript 语法 : object.style.fontSizeAdjust-"0.70" 


可 能 的 值 


值 描述 
none 默认 。 如 果 此 字体 不 可 用 ， 则 不 保持 此 字体 的 x-height。 
number 


定义 字体 的 aspect 值 比率 。 


可 使 用 的 公式 : 

首选 字体 的 字体 尺寸 * (font-size-adjust 值 / 可 用 字体 的 aspect 值 ) = 可 应 用 到 可 用 字体 的 字 
RI 

举例 : 


如 果 14px 的 Verdana (aspect 值 是 0.58) 不 可 用 ， 但 是 某 个 可 用 的 字体 的 aspect 值 是 
0.46， 那 么 替代 字体 的 尺寸 特 是 14 * (0.58/0.46) = 17.65px。 


44 


TIY 实例 


使 用 font-size-adjust 设置 字体 尺寸 


本 例 演示 如 何 使 用 font-size-adjust 设置 字体 尺寸 。 


«html» 

«head» 

«style type="text/css"> 

hi [font-size-adjust: 0.50} 
h2 (font-size-adjust: 0.40} 
p (font-size-adjust: 0.60) 
</style> 

</head> 

<body> 


<h1>This is header 1</h1> 
<h2>This is header 2</h2> 
<p>This is a paragraph</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 字体 


W3School CSS 参考 手册 


CSS 参考 手册 : CSS font 属性 


HTML DOM 参考 手册 : fontSizeAdjust 属性 


CSS font-size-adjust 属性 215 


CSS font-stretch 属性 


例 


设置 HTML TRH font-stretch 属性 : 


将 


hi 


font-stretch:ultra-condensed; 


浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 不 支持 font-stretch 属性 。 
Lr. 3 


font-stretch 属性 可 对 当前 的 font-family 进行 伸缩 变形 。 


默认 值 : normal 
继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.fontStretch-"ultra-expanded" 


可 能 的 值 


值 描述 


normal 默认 值 。 把 缩放 比例 设置 为 标准 。 
wider 把 伸展 比例 设置 为 更 进一步 的 伸展 值 
narrower 把 收缩 比例 设置 为 更 进一步 的 收缩 值 


e ultra-condensed 
e extra-condensed 
e condensed 

e semi-condensed 
e semi-expanded 

e expanded 

e extra-expanded 

e ultra-expanded 


| 
设置 font-family 的 缩放 上 比例。 
"ultra-condensed" 是 最 宽 的 值 ， 而 "ultra-expanded" 是 最 窄 的 值 。 


相关 页 面 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 


HTML DOM 参考 手册 : fontStretch 属性 


CSS font-style 属性 


实例 
为 三 个 段落 设置 不 同 的 字体 样式 : 


p.normal [font-style:normal;) 
p.italic [font-style:italic;) 
p.oblique [font-style:oblique;)] 


浏览 如 支持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 font-style 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
font-style 属性 定义 字体 的 风格 。 
说 明 


该 属性 设置 使 用 斜体 、 倾 斜 或 正常 字体 。 斜 体 字体 通常 定义 为 字体 系列 中 的 一 个 单独 的 字 
体 。 理 论 上 讲 ， 用 户 代理 可 以 根据 正常 字体 计算 一 个 斜体 字体 。 


默认 值 : normal 
继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.fontStyle-"italic" 


可 能 的 值 


值 描述 
normal 默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 。 
italic 浏览 器 会 显示 一 个 斜体 的 字体 祥 式 。 
oblique 浏览 器 会 显示 一 个 倾斜 的 字体 样式 。 
inherit 规定 应 该 从 父 元 素 继承 字体 样式 。 


TIY 实例 


设置 字体 风格 
本 例 演示 如 何 设置 字体 风格 。 


«html» 

«head» 

«style type="text/css"> 
p.normal [font-style:normal) 
p.italic [font-style:italic] 
p.oblique [font-style:oblique] 
«/style» 

</head> 


<body> 
<p class="normal">This is a paragraph, 
<p class="italic">This is a paragraph, 


<p class="oblique">This is a paragraph, 


</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 


HTML DOM 参考 手册 : fontStyle 属性 


normal.</p> 
italic .</p> 


oblique .</p> 


CSS font-variant 属性 


实例 
把 段落 设置 为 小 型 大 写字 母 字体 : 


p.small 
{ 


font-variant :small-caps; 


浏览 器 支持 
IE Firefox Chrome Safari 


所 有 主流 浏览 器 都 支持 font-variant 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 


Opera 


font-variant 属性 设置 小 型 大 写字 母 的 字体 显示 文本 ， 这 意味 着 所 有 的 小 写字 母 均 会 被 转换 为 


大 写 ， 但 是 所 有 使 用 小 型 大 写字 体 的 字母 与 其 余 文 本 相 比 ， 其 字体 尺寸 更 小 。 


说 明 
该 属性 主要 用 于 定义 小 型 大 写字 母 文 本 。 理 论 上 ， 用 户 代理 可 以 根据 正常 字体 计算 出 小 型 大 
写字 母 字 体 。 
默认 值 : normal 
继承 性 : yes 
版 本 : CSS1 


JavaScript 语法 : object.style.fontVariant-"small-caps" 


可 能 的 值 


值 描述 
normal 默认 值 。 浏 览 器 会 显示 一 个 标准 的 字体 。 
small-caps 浏览 器 会 显示 小 型 大 写字 母 的 字体 。 
inherit 规定 应 该 从 父 元 素 继承 font-variant 属性 的 值 。 
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TIY 实例 


设置 字体 的 异体 


本 例 演示 如 何 设置 字体 的 异体 。 


«html» 

«head» 

«style type="text/css"> 

p.normal [font-variant: normal) 
p.small (font-variant: small-caps} 
«/style» 

</head> 


<body> 
<p class="normal">This is a paragraph</p> 
<p class="small">This is a paragraph</p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 


HTML DOM 参考 手册 : fontVariant 属性 


CSS font-weight 属性 


设置 三 个 段落 的 字体 的 粗细 : 


p.normal [font-weight:normal;] 
p.thick ([font-weight:bold;) 
p.thicker (font-weight:900;] 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 font-weight 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


rr . N 
font-weight 属性 设置 文本 的 粗细 。 
说 明 
该 属性 用 于 设置 显示 元 素 的 文本 中 所 用 的 字体 加 粗 。 数 字 值 400 相当 于 关键 字 normal，700 
等 价 于 bold。 每 个 数字 值 对 应 的 字体 加 粗 必须 至 少 与 下 一 个 最 小 数字 一 样 细 ， 而 且 至 少 和 与 下 
一 个 最 大 数字 一 样 粗 。 

默认 值 : normal 


继承 性 : yes 


JavaScript 语法 : object.style.fontWeight-"900" 


可 能 的 值 


值 描述 
normal 默认 值 。 定 义 标准 的 字符 。 
bold 定义 粗 体 字 符 。 
bolder 定义 更 粗 的 字符 。 
lighter 定义 更 细 的 字符 。 


e 100 
e 200 
e 300 
e 400 
e 500 
e 600 
e 700 
e 800 
e 900 


| 定义 由 粗 到 细 的 字符 。400 等 同 于 normal, m 700 等 同 于 bold, ||inherit | 规定 应 该 
从 父 元 素 继承 字体 的 粗细 。 | 


TIY 实例 


设置 字体 的 粗细 


本 例 演示 如 何 设置 字体 的 粗细 。 


«html» 

«head» 

«style type="text/css"> 
p.normal [font-weight: normal} 
p.thick (font-weight: bold} 
p.thicker (font-weight: 900} 
«/style» 

</head> 


<body> 
<p class="normal">This is a paragraph</p> 


<p class="thick">This is a paragraph</p> 


<p class="thicker">This is a paragraph</p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 字体 
CSS 参考 手册 : CSS font 属性 


HTML DOM 参考 手册 : fontWeight 属性 


内 容 生 成 (Generated Content) 


属性 
content 


counter- 
increment 


counter-reset 
quotes 
crop 


move-to 


page-policy 


描述 
与 :before 以 及 :after 伪 元 素 配 合 使 用 ， 来 插入 生成 内 容 。 
递增 或 递减 一 个 或 多 个 计数 器 。 
创建 或 重 置 一 个 或 多 个 计数 器 。 
设置 藤 套 引用 的 引号 类 型 。 
允许 被 替换 元 素 仅 仅 是 对 象 的 和 矩形 区 域 ， 而 不 是 整个 对 象 。 
从 流 中 删除 元 素 ， 然 后 在 文档 中 后 面 的 点 上 重新 插入 。 


确定 元 素 基 于 页 面 的 occurrence 应 用 于 计数 器 还 是 字符 串 
值 。 


CSS 


C CO NM hh 


CSS content 属性 


实例 
下 面 的 例子 在 每 个 链接 后 插入 括号 中 的 URL : 


a:after 


content: " (" attr(href) ")"; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 content 属性 。 


注释 : 如 果 已 规定 !DOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 content Æ 
性 。 


定义 和 用 法 
content 属性 与 :before 及 :after 伪 元 素 配 合 使 用 ， 来 插入 生成 内 容 。 
说 明 


该 属性 用 于 定义 元 素 之 前 或 之 后 放置 的 生成 内 容 。 默 认 地 ， 这 往往 是 行内 内 容 ， 不 过 该 内 容 
创建 的 框 类 型 可 以 用 属性 display 控制 。 


默认 值 : normal 


继承 性 : no 
版 本 : CSS2 


JavaScript 语法 : object.style.content-"url(beep.wav)" 


可 能 的 值 


值 描述 
none 
normal 
content specifications 
inherit 规定 应 该 从 父 元 素 继 承 content 属性 的 值 。 


相关 页 面 


CSS 参考 手册 : CSS :before 伪 元 素 
CSS 参考 手册 : CSS :after 伪 元 素 


HTML DOM 参考 手册 : content 属性 


CSS counter-increment 属性 


实例 
对 部 分 和 子 部 分 进行 编号 〈 比 如 "Section 1", "1.1" "1.2") 的 方法 : 


body 
t 


counter-reset:section; 


} 
h1 
{ 


counter-reset:subsection; 
} 

hi:before 
{ 


content:"Section " counter(section) ". "; 
counter-increment:section; 


} 


h2:before 
{ 


counter -increment :subsection; 
content:counter(section) "." counter (subsection) " "; 


} 


| EAFF 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 counter-increment 属性 。 


注释 : 如 果 已 规定 !IDOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 counter- 
increment 属性 。 


m. : 
counter-increment 属性 设置 某 个 选取 器 每 次 出 现 的 计数 器 增 量 。 默 认 增 量 是 1。 
说 明 


利用 这 个 属性 ， 计 数 器 可 以 递增 (或 递减 ) 某 个 值 ， 这 可 以 是 正 值 或 负 值 。 如 果 没 有 提供 
number 值 ， 则 默认 为 1。 


注释 : 如 果 使 用 了 "display: none"， 则 无 法 增加 计数 。 如 使 用 "visibility: hidden"， 则 可 增加 计 
数 。 


默认 值 : none 
继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.counterlncrement-"subsection" 


可 能 的 值 


值 描述 
none 默认 。 选 择 器 无 计数 器 增 量 。 
id number 
id 定义 将 增加 计数 的 选择 器 、id 或 class. 
number 定义 增 量 。number 可 以 是 正 数 、 规 或 者 负数 。 


| | inherit | 规定 应 该 从 父 元 素 继承 counter-increment 属性 的 值 。 | 


相关 页 面 


CSS 参考 手册 : CSS :before 伪 元 素 
CSS 参考 手册 : CSS :after 伪 元 素 
CSS 参考 手册 : content 属性 


CSS 参考 手册 : counter-reset 属性 


CSS counter-reset 属性 


ap 
实例 
对 部 分 和 子 部 分 进行 编号 〈 比 如 "Section 1", 1.1". 1.2"). 的 方法 : 
body 
{ | 
counter-reset:section; 


hi 


counter-reset:subsection; 


hi:before 


content:"Section " counter(section) ". "; 
counter-increment:section; 


h2:before 


counter-increment:subsection; 
content:counter(section) "." counter(subsection) " "; 


} 


| EAFF 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 counter-reset 属性 。 


注释 : 如 果 已 规定 !DOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 counter- 
reset 属性 。 


rm . N 
counter-reset 属性 设置 某 个 选择 器 出 现 次 数 的 计数 器 的 值 。 默 认为 0。 


利用 这 个 属性 ， 计 数 器 可 以 设置 或 重 置 为 任何 值 ， 可 以 是 正 值 或 负 值 。 如 果 没 有 提供 
number， 则 默认 为 0。 

注释 : 如 果 使 用 "display: none"， 则 无 法 重 置 计数 器 。 如 果 使 用 "visibility: hidden"， 则 可 以 重 
置 计 数 器 。 


默认 值 : none 


继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.counterReset-"subsection" 


可 能 的 值 


值 描述 
none 默认 。 不 能 对 选择 器 的 计数 器 进行 重 置 。 
id number 


id 定义 重 置 计数 器 的 选择 器 、id 或 class, 
number 可 设置 此 选择 器 出 现 次 数 的 计数 器 的 值 。 可 以 是 正 数 、 需 或 负数 。 


| | inherit | 规定 应 该 从 父 元 素 继承 counter-reset 属性 的 值 。 | 


相关 页 面 


CSS 参考 手册 : CSS :before 伪 元 素 
CSS 参考 手册 : CSS :after 伪 元 素 
CSS 参考 手册 : content 属性 


CSS 参考 手册 : counter-increment 属性 


CSS quotes 属性 


实例 


q:lang(en) 
{ 


quotes: EE !'Hg Hau MEUS 


} 


HTML 代码 : 


<html lang="en"> 

<head> 

</head> 

<body> 

<p><q>This is a <q>big</q> quote</q></p> 
</body> 

</html> 


俞 出 : 


"This is a 'big' quote" 
C I 大 口 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 quotes 属性 。 


注释 : 如 果 已 规定 !DOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 quotes Æ 
性 。 


定义 和 用 法 


quotes Eltz ERESIA (embedded quotation) 的 引号 类 型 。 


W3School CSS 参考 手册 


默认 值 : not specified 
继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.quotes-"none" 


可 能 的 值 


t 描述 
€ 规定 "content" 属性 的 "open-quote" 和 "close-quote" 的 值 不 会 产 
生 任 何 引号 。 
string string string 
string 


定义 要 使 用 的 引号 。 
前 两 个 值 规定 第 一 级 引用 赃 套 ， 后 两 个 值 规定 下 一 级 引号 典 套 。 


| | inherit | 规定 应 该 从 父 元 素 继承 quotes 属性 的 值 。 | 


引号 字符 


Result Description Entity Number 
" double quote 








single quote 














« single, left angle quote 
> single, right angle quote 
€ double, left angle quote 
» double, right angle quote 





left quote (single high-6) 





right quote (single high-9) 
> left quote (double high-6) 
right quote (double high-9) 
。 


相关 页 面 


HTML DOM 参考 手册 : quotes 属性 














NO 


CD 





CSS quotes 属性 3 


Grid 属性 


属性 描述 CSS 
grid-columns 规定 网 格 中 每 个 列 的 宽度 。 3 
grid-rows 规定 网 格 中 每 个 列 的 高 度 。 3 


CSS3 grid-columns 属性 


实例 


在 div 元 素 中 部 添加 一 个 网 格 行 ， 距 右 侧 200 像素 处 添加 另 一 个 ， 在 余下 空间 的 中 间 再 添加 


div 


a SEE d * * 200px; 
浏览 器 支持 

目前 没有 浏览 器 支持 grid-columns。 
定义 和 用 法 


grid-columns 属性 网 格 中 每 列 的 宽度 。 


提示 : 使 用 网 格 系统 对 于 打印 设计 病 来 说 具有 巨大 的 价值 。 现 在 相同 的 改变 被 应 用 到 在 线 内 
容 上 。 网 格 属性 提供 了 在 可 伸缩 网 格 中 调整 标题 、 文 本 和 图 片 尺寸 和 位 置 的 能 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.gridColumns-"5096 200px" 


语法 


grid-columns: length | ?6 |none|inherit; 
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值 描述 
length 参考 包含 块 的 网 格 。 
% 参考 包含 块 的 宽度 。 
none 
inherit 
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CSS3 grid-rows 属性 


例 


定义 100 像素 的 标题 行 ， 并 按 需 添加 多 个 领 外 的 行 ， 高 度 交 蔡 为 30 和 60 像素 : 


将 


div 


grid-rows:100px (30px 60px); 
浏览 器 支持 
目前 没有 浏览 器 支持 grid-rows。 
定义 和 用 法 


grid-rows 属性 规定 网 格 中 每 行 的 高 度 。 


提示 : 使 用 网 格 系统 对 于 打印 设计 病 来 说 具有 巨大 的 价值 。 现 在 相同 的 改变 被 应 用 到 在 线 内 
容 上 。 网 格 属性 提供 了 在 可 伸缩 网 格 中 调整 标题 、 文 本 和 图 片 尺寸 和 位 置 的 能 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.gridRows-"100px (30px 60px)" 


语法 


grid-rows: _length_|_% |none|inherit; 


W3School CSS 参考 手册 


值 描述 
length 参考 包含 块 的 网 格 。 
% 参考 包含 块 的 高 度 。 
none 
inherit 





CSS3 grid-rows 属性 238 


Hyperlink 属性 


属性 描述 CSS 

target INO 设置 target-name、target-new 以 及 target-position 属 3 
性 。 

target-name 规定 在 何 处 打开 链接 (链接 的 目标 )。 3 

target-new 规定 目标 链接 在 新 窗口 还 是 在 已 有 窗口 的 新 标签 页 中 打开 。 3 

I 规定 在 何 处 放置 新 的 目标 链接 。 3 


position 


CSS3 target 属性 


实例 
在 新 窗口 中 打开 所 有 超 链接 ， 并 在 所 有 其 他 标签 页 /窗口 上 面 放置 新 窗口 : 


a 


target:new front; 


浏览 器 支持 


目前 没有 浏览 器 支持 target。 


= . N 
target 属性 是 一 个 简写 属性 ， 用 于 设置 以 下 属性 : 


e target-name 
e target-new 
e target-position 


默认 值 : current window above 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.target-"new front" 


语法 


target: target-name | target-new _target-position_; 


值 描述 


target-name 规定 在 何 多 打开 超 链 接 (target destination) 。 
target-new 规定 应 该 在 新 窗口 或 已 有 窗口 的 新 标签 页 中 打开 超 链接 。 
target-position 规定 在 何 处 放置 新 的 目的 地 链接 。 


注释 : target-new 和 target-position 值 只 有 在 target-name 值 创建 新 标签 页 或 新 窗口 中 有 效 。 


CSS3 target-name 属性 


例 


在 新 窗口 中 打开 所 有 超 链 接 : 


将 


a 


target-name:new; 


浏览 器 支持 
目前 没有 浏览 器 支持 target-name。 
定义 和 用 法 


target-name 属性 规定 在 何人 处 打开 超 链接 (target destination). 


默认 值 : current 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.targetName-"new" 


语法 


target-name: current|root|parent|new|modal| name ; 


值 描述 
current ， 在 链接 所 在 的 框架 、 标 签 页 或 窗口 中 打开 超 链 接 。 
root 在 当前 标签 页 或 窗口 中 超 链 接 。 
parent ”在 父 框 架 中 打开 超 链 接 。 如 果 当 前 框架 没有 父 框 架 ， 则 将 该 值 视 作 root. 
new 创建 新 的 目的 地 (参阅 target-new) 。 
modal ”在 新 的 (暂时 创建 的 ) 模 态 窗口 中 打开 新 窗口 。 


E 在 已 有 框架 、 窗 口 或 标签 页 中 打开 链接 。 如 果 name 目的 地 不 存在 ， 则 用 该 名 
称 创 建新 的 目的 地 。 


CSS3 target-new 属性 


实例 
在 新 标签 页 而 不 是 新 窗口 中 打开 超 链接 : 


a 


target-name:new; 
target-new:tab; 


浏览 器 支持 

目前 没有 浏览 器 支持 target-new。 

ri. S 

target-new 属性 规定 在 新 窗口 还 是 新 标签 页 或 已 有 窗口 中 打开 新 的 目的 地 链接 。 


注释 : target-new 属性 只 有 在 target-name 属性 创建 新 标签 页 或 新 窗口 时 有 效 。 


默认 值 : window 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.targetNew-"tab" 


语法 


target-new: window|tab|none; 


值 描述 


window 在 新 窗口 中 打开 超 链 接 。 
tab 在 已 有 窗口 的 新 标签 页 中 打开 超 链 接 。 


none 不 创建 新 的 目的 地 。 


CSS3 target-position 属性 


实例 
在 新 窗口 中 打开 超 链接 ， 并 在 所 有 其 他 标签 页 /窗口 之 前 放置 新 的 窗口 : 


a 


target-name:new; 
target-position:front; 


浏览 器 支持 

目前 没有 浏览 器 支持 target-position。 

rm. N 

target-position 属性 规定 在 何 处 放置 新 的 目的 地 链接 。 


注释 : target-position 属性 只 有 在 target-name 属性 创建 新 标签 页 或 新 窗口 时 有 效 。 


默认 值 : above 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.targetPosition-"front" 


语法 


target-position: above|behind|front|back; 


值 
above 
behind 
front 


back 


在 当前 标签 页 /窗口 之 前 放置 新 的 目的 地 标签 页 /窗口 。 
在 当前 标签 页 /窗口 之 后 放置 新 的 目的 地 标签 页 /窗口 
在 所 有 其 他 标签 页 /窗口 之 前 放置 新 的 目的 地 标签 页 / 
在 所 有 其 他 标签 页 /窗口 之 后 放置 新 的 目的 地 标签 页 / 


CSS 列表 属性 (List) 


属性 描述 css 
list-style 在 一 个 声明 中 设置 所 有 的 列表 属性 。 1 
list-style-image 将 图 象 设置 为 列表 项 标记 。 1 
list-style-position 设置 列表 项 标记 的 放置 位 置 。 1 
list-style-type 设置 列表 项 标记 的 类 型 。 1 


marker-offset 2 


CSS list-style 属性 


实例 
把 图 像 设 置 为 列表 中 的 列表 项 目标 记 : 


ul 


list-style:square inside url('/i/arrow.gif'); 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 list-style 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
list-style 简写 属性 在 一 个 声明 中 设置 所 有 的 列表 属性 。 


说 明 
该 属性 是 一 个 简写 属性 ， 泗 盖 了 所 有 其 他 列表 样式 属性 。 由 于 它 应 用 到 所 有 display 为 list- 
item 的 元 素 ， 所 以 在 普通 的 HTML 和 XHTML 中 只 能 用 于 上 i 元 素 ， 不 过 实际 上 它 可 以 上 应 用 到 
任何 元 素 ， 并 由 list-item 元 素 继承 。 
可 以 按 顺 序 设置 如 下 属性 : 

e list-style-type 

e list-style-position 

e list-style-image 


可 以 不 设置 其 中 的 某 个 值 ， 比 如 "list-style:circle inside;" 也 是 允许 的 。 未 设置 的 属性 会 使 用 其 
默认 值 。 


默认 值 : disc outside none 


继承 性 : yes 
版 本 CSS1 
JavaScript 语法 : object.style.listStyle-"decimal inside" 


可 能 的 值 


值 描述 
list-style-type 设置 列表 项 标记 的 类 型 。 参 阅 : list-style-type 中 可 能 的 值 。 
list-style-position ”设置 在 何 处 放置 列表 项 标记 。 参 阅 : list-style-position 中 可 能 的 值 。 


Ps 


list-style-image 使 用 图 像 来 替换 列表 项 的 标记 。 参 阅 : list-style-image 中 可 能 的 值 。 
inherit 规定 应 该 从 父 元 素 继承 list-style 属性 的 值 。 


TIY 实例 


在 一 个 声明 中 定义 所 有 的 列表 属性 
本 例 演示 将 所 有 针对 列表 的 属性 设置 于 一 个 简写 属性 。 


«html» 

«head» 

«style type="text/css"> 
ul 


list-style: square inside url('/i/eg arrow.gif') 
} 

</style> 

</head> 


<body> 

<ul> 

<1 > 咖啡 </1i> 
<1i> 茶 </1i> 
<1i> 可 口 可 乐 </1i> 
«/ul» 

«/body» 


«/html» 


相关 页 面 


W3School CSS 参考 手册 


CSS 教程 : CSS 列表 


HTML DOM 参考 手册 : listStyle 属性 


CSS list-style 属性 
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CSS list-style-image 属性 


实例 
把 图 像 设 置 为 列表 中 的 项 目标 记 : 
ul 


list-style-image:url("/i/arrow.gif"); 
list-style-type:square; 


| Jt da SHE 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 list-style-image 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
list-style-image 属性 使 用 图 像 来 蔡 换 列表 项 的 标记 。 
说 明 
这 个 属性 指定 作为 一 个 有 序 或 无 序列 表 项 标志 的 图 像 。 图 像 相 对 于 列表 项 内 容 的 放置 位 置 通 
常 使 用 list-style-position 属性 控制 。 
注释 : 请 始终 规定 一 个 "list-style-type" 属性 以 防 图 像 不 可 用 。 
默认 值 : none 


继承 性 : yes 


JavaScript 语法 : object.style.listStylelmage="url(/images/blueball.gif )" 


可 能 的 值 


值 描述 
URL 图 像 的 路 径 。 
none 默认 。 无 图 形 被 显示 。 
inherit 规定 应 该 从 父 元 素 继承 list-style-image 属性 的 值 。 


M 


TIY 实例 


将 图 像 作 为 列表 项 标记 
本 例 演示 如 何 将 图 像 作 为 列表 项 标记 。 


«html» 

«head» 

«style type="text/css"> 
ul 


list-style-image: url('/i/eg arrow.gif') 
} 

</style> 
</head> 

<body> 

«ul» 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 
<1i> 可 口 可 乐 </1i> 
«/ul» 

«/body» 


«/html» 


相关 页 面 


CSS 教程 : CSS 列表 
CSS 参考 手册 : CSS list-style 属性 


HTML DOM 参考 手册 : listStylelmage 属性 


CSS list-style-position 属性 


实例 
规定 列表 中 列表 项 目标 记 的 位 置 : 


ul 


list-style-position:inside; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 list-style-position 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
EE 1 
list-style-position RTE iE TE fn] 4e Bui P1] o is 
说 明 
该 属性 用 于 声明 列表 标志 相对 于 列表 项 内 容 的 位 置 。 外 部 (outside) 标志 会 放 在 离 列 表 项 边框 


边界 一 定 距离 处 ， 不 过 这 距离 在 CSS 中 未 定义 。 内 部 (inside) 标志 处 理 为 好 像 它们 是 插入 在 
列表 项 内 容 最 前 面 的 行内 元 素 一 样 。 


默认 值 : outside 
继承 性 : yes 


版 本 : CSS1 


JavaScript 语法 : object.style.listStylePosition-"inside" 


可 能 的 值 


值 描述 
inside 列表 项 目标 记 放 置 在 文本 以 内 ， 且 环绕 文本 根据 标记 对 齐 。 


默认 值 。 保 持 标 记 位 于 文本 的 左 侧 。 列 表 项 目标 记 放 置 在 文本 以 外 ， 且 环绕 文 
本 不 根据 标记 对 齐 。 


inherit 规定 应 该 从 父 元 素 继 承 list-style-position 属性 的 值 。 


outside 
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TIY 实例 


放置 列表 标记 
本 例 演示 在 何 处 放置 列表 标记 。 


«html» 

«head» 

«style type="text/css"> 
ul.inside 


list-style-position: inside 


} 


ul.outside 


list-style-position: outside 
} 

</style> 

</head> 


<body> 
<p> 该 列表 的 list-style-position 的 值 是 "inside" : </p> 
«ul class="inside"> 


«li»Earl Grey Tea - 一 种 黑 颜色 的 茶 </1i> 
«li»Jasmine Tea - 一 种 神奇 的 “全 功能 ” 茶 </1i> 
<li>Honeybush Tea - 一 种 伟人 愉快 的 果 味 茶 </1Li> 
«/ul» 


<p> 该 列表 的 list-style-position 的 值 是 "outside" : </p> 
«ul class="outside"> 


«li»Earl Grey Tea - 一 种 黑 颜色 的 茶 </1i> 
«li»Jasmine Tea - 一 种 神奇 的 “全 功能 ” 茶 </1i> 
«li-»Honeybush Tea - 一 种 伟人 愉快 的 果 味 茶 </1i> 
«/ul» 

«/body» 

«/html» 


相关 页 面 


CSS 教程 : CSS 列表 
CSS 参考 手册 : CSS list-style 属性 


HTML DOM 参考 手册 : listStylePosition 属性 
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CSS list-style-type 属性 


M 


实例 
设置 不 同 的 列表 样式 : 


ul.circle [list-style-type:circle;) 
ul.square [list-style-type:square;) 
ol.upper-roman (list-style-type:upper-roman;) 
ol.lower-alpha [list-style-type:lower-alpha;) 


(在 页 面 底部 可 以 找到 更 多 实例 ) 
S - nn 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 list-style-type 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "decimal-leading- 
zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian" x "inherit", 


定义 和 用 法 


list-style-type 属性 设置 列表 项 标记 的 类 型 。 


默认 值 : disc 
继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.listStyleType-"square" 


可 能 的 值 


CSS2 的 值 : 


ta 描述 
none 无 标记 。 
disc 默认 。 标 记 是 实心 圆 。 
circle 标记 是 空心 圆 。 
square 标记 是 实心 方块 。 
decimal 标记 是 数字 。 
decimal-leading-zero ”0 开头 的 数字 标记 。(01, 02, 03, 等 。) 
lower-roman 小 写 罗 马 数 字 (i, ii, iii, iv, v, 等 。) 
upper-roman 大 写 罗 马 数字 (|, II, Ill, IV, V, 等 。) 
lower-alpha 小 写 英 文字 母 The marker is lower-alpha (a, b, c, d, e, 等 。) 
upper-alpha 大 写 英 文字 母 The marker is upper-alpha (A, B, C, D, E, 等 。) 
lower-greek 小 写 希 腊 字 母 (alpha, beta, gamma, 等 。) 
lower-latin 小 写 拉丁 字母 (a, b, c, d, e, 等 。) 
upper-latin 大 写 拉 丁字 母 (A, B, C, D, E, &, ) 
hebrew 传统 的 希 伯 来 编号 方式 
armenian 传统 的 亚美尼亚 编号 方式 
georgian 传统 的 乔治 亚 编号 方式 (an, ban, gan, 等 。) 
cjk-ideographic 简单 的 表意 数字 
hiragana 标记 是 : a, i, u, e, O, ka, ki, 等 。 (日 文 片 假名 ) 
katakana 标记 是 : A, |, U, E, O, KA, KI, 等 。 (日 文 片 假名 ) 
hiragana-iroha 标记 是 : i, ro, ha, ni, ho, he, to, 等 。 (日 文 片 假名 ) 
katakana-iroha 标记 是 : l, RO, HA, NI, HO, HE, TO, 等 。 (日 文 片 假名 ) 


CSS2.1 的 值 : 


disc | circle | square | decimal | decimal-leading-zero | 
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | 
armenian | georgian | none | inherit 


TIY 实例 


在 无 序列 表 中 的 不 同类 型 的 列表 标记 


本 例 演示 在 CSS 中 不 同类 型 的 列表 项 标记 。 


«html» 

«head» 

«style type="text/css"> 

ul.disc (list-style-type: disc} 
ul.circle [list-style-type: circle} 
ul.square ([list-style-type: square} 
ul.none [list-style-type: none} 
«/style» 

</head> 


<body> 

<ul class="disc"> 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
«/ul» 


«ul class-"circle"» 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
«/ul» 


«ul class-'square'» 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
«/ul» 


«ul class-z"none"» 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
«/ul» 

«/body» 


</html> 


在 有 序列 表 中 不 同类 型 的 列表 项 标记 
本 例 演 示 在 CSS 中 不 同类 型 的 列表 项 标记 。 


«html» 

«head» 

«style type="text/css"> 

ol.decimal [list-style-type: decimal) 
ol.lroman [list-style-type: lower-roman] 
ol.uroman [list-style-type: upper-roman] 
ol.lalpha [list-style-type: lower-alpha] 
ol.ualpha [list-style-type: upper-alpha] 
</style> 

</head> 


<body> 

<ol class="decimal"> 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
«/ol» 


«ol class-"lroman"» 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
«/ol» 


«ol class-"uroman"» 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
«/ol» 


«ol class-"lalpha'» 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
«/ol» 


«ol class-'ualpha'» 
<1i> 咖 啡 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
«/ol» 

«/body» 


</html> 


所 有 的 列表 样式 类 型 
本 例 演示 在 CSS 中 所 有 不 同类 型 的 列表 项 标记 。 


«html» 

«head» 

«style type="text/css"> 

ul.none [list-style-type: none} 

ul.disc (list-style-type: disc} 

ul.circle [list-style-type: circle} 

ul.square [list-style-type: square} 
ul.decimal (list-style-type: decimal} 
ul.decimal-leading-zero (list-style-type: decimal-leading-zeroj 
ul.lower-roman [list-style-type: lower-roman) 
ul.upper-roman [list-style-type: upper-roman) 
ul.lower-alpha [list-style-type: lower-alpha) 
ul.upper-alpha [list-style-type: upper-alpha) 
ul.lower-greek [list-style-type: lower-greek) 
ul.lower-latin [list-style-type: lower-latin) 
ul.upper-latin [list-style-type: upper-latin) 
ul.hebrew [list-style-type: hebrew} 
ul.armenian [list-style-type: armenian} 


ul.georgian [list-style-type: georgian} 
ul.cjk-ideographic [list-style-type: cjk-ideographicj 
ul.hiragana [list-style-type: hiragana} 

ul.katakana [list-style-type: katakana} 
ul.hiragana-iroha [list-style-type: hiragana-iroha) 
ul.katakana-iroha [list-style-type: katakana-iroha) 
</style> 

</head> 


<body> 

<ul class="none"> 
<li>"none" 类 型 </1i> 
<1i> 茶 </1i> 
<1i> 可 口 可 乐 </1i> 
«/ul» 


«ul class-"disc"» 
«li»Disc 类 型 </1i> 
<1i> 茶 </1i> 
<1i> 可 口 可 乐 </1i> 
«/ul» 


«ul class-"circle"» 
«li»Circle 类 型 </1i> 
<1i> 茶 </1i> 
<1i> 可 口 可 乐 </1i> 
«/ul» 


«ul class-'square'» 
«li»Square 类 型 </1i> 
<1i> 茶 </1i> 
<1i> 可 口 可 乐 </1i> 
«/ul» 


«ul class-"decimal"» 
«li»Decimal 类 型 </]i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 
«/ul» 


«ul class-'decimal-leading-zero"-» 
«li»Decimal-leading-zero X7!«/li» 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

</ul> 


«ul class-"lower-roman"» 
«li»Lower-roman 类 型 </]i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class-'upper-roman"» 
«li»Upper-roman 类 型 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class-"lower-alpha"» 
«li»Lower-alpha 类 型 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class-'upper-alpha"» 
«li»Upper-alpha 类 型 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class-"lower-greek'"» 
«li»Lower-greek 类 型 </1i> 


<1i> 茶 </1i> 
<1i> 可 口 可 乐 </1i> 
«/ul» 


«ul class-"lower-latin"» 
«li»Lower-latin 类 型 </]i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class-'upper-latin'"» 
«li»Upper-latin 类 型 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class-"hebrew"» 
«li»Hebrew 类 型 </1i> 
<1i> 茶 </1i> 
<1i> 可 口 可 乐 </1i> 
«/ul» 


«ul class-"armenian"» 
«li»Armenian 类 型 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class="georgian"> 
«li»Georgian 类 型 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class-"cjk-ideographic"» 
«li»Cjk-ideographic 类 型 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class-"hiragana"» 
«li»Hiragana 类 型 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class-"katakana"» 
«li»Katakana 类 型 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class-"hiragana-iroha"» 
«li»Hiragana-iroha 类 型 </1i> 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«ul class-"katakana-iroha"» 
«li»Katakana-iroha 类 型 </1 > 
<1i> 茶 </1i> 

<1i> 可 口 可 乐 </1i> 

«/ul» 


«/body» 
</html> 


相关 页 面 


W3School CSS 参考 手册 


CSS 教程 : CSS 列表 


CSS 参考 手册 : CSS list-style 属性 


HTML DOM 参考 手册 : listStyleType 属性 


CSS list-style-type 
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CSS 外 边 距 属性 (Margin) 


属性 描述 css 
margin 在 一 个 声明 中 设置 所 有 人 外边 距 属性 。 1 
margin-bottom 设置 元 素 的 下 外 边 距 。 1 
margin-left 设置 元 素 的 左 外 边 距 。 1 
margin-right 设置 元 素 的 右 外 边 距 。 1 


margin-top 设置 元 素 的 上 外 边 距 。 1 


CSS margin 属性 


实例 
设置 p 元 素 的 4 个 外 边 距 : 


p 


margin:2cm 4cm 3cm 4cm; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 margin 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


a. : 
定义 和 用 法 

margin 简写 属性 在 一 个 声明 中 设置 所 有 人 外边 距 属 性 。 该 属性 可 以 有 1 到 4 个 值 。 
说 明 

这 个 简写 属性 设置 一 个 元 素 所 有 和 外边 距 的 宽度 ， 或 者 设置 各 边 上 外 边 距 的 宽度 。 


块 级 元 素 的 垂直 相 邻 外 边 距 会 合并 ， 而 行内 元 素 实际 上 不 占 上 下 外 边 距 。 行 内 元 素 的 的 左右 
外 边 距 不 会 合并 。 同 样 地 ， 浮 动 元 素 的 外 边 距 也 不 会 合并 。 人 允许 指定 负 的 外 边 距 值 ， 不 过 使 
用 时 要 小 心 。 


注释 : 允许 使 用 负 值 。 
例子 1 


margin:10px 5px 15px 20px; 


e 左 外 边 距 是 20px 


例子 2 


margin:10px 


margin:10px 


上 外 


距 和 下 外 


5px 15px; 


边 距 是 10px 
° EA 距 是 5px 
边 


5px; 


距 是 10px 


边 边 
° MIB ADIEA 5px 


例子 4 


margin:10px; 


。 所 有 4 个 外 边 距 都 是 10px 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.margin-"10px 5px" 
LA 
可 能 的 值 
值 描述 
auto 浏览 器 计算 外 边 距 。 
length 规定 以 具体 单位 计 的 外 边 距 值 ， 上 比如 像素 、 厘 米 等 。 默 认 值 是 0px。 
% 规定 基于 父 元 素 的 宽度 的 百分比 的 外 边 距 。 
inherit 规定 应 该 从 父 元 素 继承 外 边 距 。 


TIY 实例 


所 有 的 边 距 属性 在 一 个 声明 中 
本 例 演示 如 何 将 所 有 的 边 距 属 性 设置 于 一 个 声明 中 。 


«html» 

«head» 

«style type="text/css"> 

p.margin (margin: 2cm 4cm 3cm 4cm} 
</style> 

</head> 

<body> 

<p> 这 个 段落 没有 指定 外 边 距 。</p> 

«p class="margin"> 这 个 段落 带 有 指定 的 外 边 距 。 这 个 段落 带 有 指定 的 外 边 距 。 这 个 段落 带 有 指定 的 外 边 距 。 这 个 段 ， 
<p> 这 个 段落 没有 指定 外 边 距 。</p> 
</body> 


«/html» 


El i E 


相关 页 面 
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HTML DOM 参考 手册 : margin 属性 


CSS margin-bottom 属性 


实例 
设置 p 元 素 的 下 外 边 距 : 


p 


margin-bottom:2cm; 


(在 页 面 底部 可 以 找到 更 多 实例 ) 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 margin-bottom 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
= 、 : 
margin-bottom 属性 设置 元 素 的 下 外 边 距 。 


注释 : 允许 使 用 负 值 。 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.marginBottom-"10px" 


可 能 的 值 


值 描述 
auto 浏览 器 计算 下 外 边 距 。 
length 规定 以 具体 单位 计 的 下 外 边 距 值 ， 比 如 像素 、 厘 米 等 。 默 认 值 是 0px。 
% 规定 基于 父 元 素 的 宽度 的 百分比 的 下 外 边 距 。 
inherit — 规定 应 该 从 父 元 素 继承 下 外 边 距 。 


TIY 实例 


设置 文本 的 下 外 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 文本 的 下 外 边 距 。 


«html» 

«head» 

«style type="text/css"> 
p.bottommargin (margin-bottom: 2cm} 
</style> 

</head> 


<body> 

<p> 这 个 段落 没有 指定 外 边 距 。</p> 

«p class="bottommargin"> 这 个 段落 带 有 指定 的 下 外 边 距 。</p> 
<p> 这 个 段落 没有 指定 外 边 距 。</p> 

</body> 


</html> 


设置 文本 的 下 外 边 距 2 
本 例 演示 如 何 使 用 百分比 值 来 设置 文本 的 下 外 边 距 。 


«html» 

«head» 

«style type="text/css"> 
p.bottommargin 

{ 

margin-bottom: 25% 

} 

</style> 

</head> 

<body> 


<p>This is a paragraph with no margin specified</p> 
<p class="bottommargin">This is a paragraph with a specified bottom margin</p> 
<p>This is a paragraph with no margin specified</p> 


</body> 
</html> 


相关 页 面 


W3School CSS 参考 手册 


CSS 教程 : CSS 外 边 距 


HTML DOM 参考 手册 : marginBottom 属性 


CSS margin-bottom 属性 270 


CSS margin-left 属性 


实例 
设置 p 元 素 的 左 外 边 距 : 


p 


margin-left:2cm; 


(在 页 面 底部 可 以 找到 更 多 实例 ) 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 margin-left 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
rm . N 
margin-left 属性 设置 元 素 的 左 外 边 距 。 


注释 : 允许 使 用 负 值 。 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.marginLeft-"10px" 


可 能 的 值 


值 描述 


auto 浏览 器 设置 的 左 外 边 距 。 

length 定义 固定 的 左 外 边 距 。 默 认 值 是 0。 

% 定义 基于 父 对 象 总 高 度 的 百分比 左 外 边 距 。 
inherit 规定 应 该 从 父 元 素 继承 左 外 边 距 。 
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TIY 实例 


设置 文本 的 左 外 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 文本 的 左边 距 。 


«html» 

«head» 

«style type="text/css"> 
p.leftmargin (margin-left: 2cm} 
</style> 

</head> 


<body> 

<p> 这 个 段落 没有 指定 外 边 距 。</p> 

«p class="leftmargin"> 这 个 段落 带 有 指定 的 左 外 边 距 。</p> 
</body> 


</html> 


设置 文本 的 左 外 边 距 2 
本 例 演示 如 何 使 用 百分比 值 来 设置 文本 的 左边 距 。 


«html» 

«head» 

«style type="text/css"> 
p.leftmargin 


margin-left: 2596 
</style> 
</head> 


<body> 


<p>This is a paragraph with no margin specified</p> 
«p class="leftmargin">This is a paragraph with a specified left margin</p> 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 外 边 距 


W3School CSS 参考 手册 


HTML DOM 参考 手册 : marginLeft 属性 


CSS margin-left 属性 278 


CSS margin-right 属性 


实例 
设置 p 元 素 的 右 外 边 距 : 
p 


margin-right:2cm; 


(在 页 面 底 部 可 以 找到 更 多 实例 ) 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 margin-right 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
Lr 、 N 
margin-right 属性 设置 元 素 的 右 外 边 距 。 


注释 : 允许 使 用 负 值 。 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.marginRight-"10px" 


可 能 的 值 


值 描述 


auto 浏览 器 设置 的 右 外 边 距 。 

length 定义 固定 的 右 外 边 距 。 上 默认 值 是 0。 

% 定义 基于 父 对 象 总 高 度 的 百分比 右 外 边 距 。 
inherit 规定 应 该 从 父 元 素 继承 右 外 边 距 。 


TIY 实例 


置 文本 的 右 外 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 文本 的 右 外 边 距 。 


«html» 

«head» 

«style type="text/css"> 
p.rightmargin (margin-right: 8cm} 
</style> 

</head> 


<body> 

<p> 这 个 段落 没有 指定 外 边 距 。</p> 

«p class="rightmargin"> 这 个 段落 带 有 指定 的 右 外 边 距 。 这 个 段落 带 有 指定 的 右 外 边 距 。 这 个 段落 带 有 指定 的 右 外 羡 
</body> 


</html> 
EJES) 
多 置 文本 的 右 外 边 距 2 

本 例 演示 如 何 使 用 百分比 值 来 设置 文本 的 右 外 边 距 。 





«html» 

«head» 

«style type="text/css"> 
p.rightmargin 


margin-right:2596 
</style> 
</head> 


<body> 


<p style="text-align:right">This is a right aligned paragraph with no margin specified</p 
<p class="rightmargin" style="text-align:right">This is a right aligned paragraph with a 


</body> 
</html> 


a] — E 


相关 页 面 
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CSS 教程 : CSS 外 边 距 


HTML DOM 参考 手册 : marginRight 属性 


CSS margin-right 属性 276 


CSS margin-top 属性 


实例 
设置 p 元 素 的 上 外 边 距 : 


p 


margin-top:2cm; 


(在 页 面 底部 可 以 找到 更 多 实例 ) 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 margin-top 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
rm . N 
margin-top 属性 设置 元 素 的 上 外 边 距 。 


注释 : 允许 使 用 负 值 。 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.marginTop-"10px" 


可 能 的 值 


值 描述 


auto 浏览 器 设置 的 上 外 边 距 。 

length 定义 固定 的 上 外 边 距 。 默 认 值 是 0。 

% 定义 基于 父 对 象 总 高 度 的 百分比 上 外 边 距 。 
inherit 规定 应 该 从 父 元 素 继承 上 外 边 距 。 
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TIY 实例 


设置 文本 的 上 外 边 距 1 
本 例 演示 如 何 使 用 厘米 值 来 设置 文本 的 顶 边 距 。 


«html» 

«head» 

«style type="text/css"> 
p.topmargin (margin-top: 5cm} 
</style> 

</head> 


<body> 

<p> 这 个 段落 没有 指定 外 边 距 。</p> 

«p class="topmargin"> 这 个 段落 带 有 指定 的 上 外 边 距 。</p> 
</body> 

«/html» 


设置 文本 的 上 外 边 距 2 
本 例 演示 如 何 使 用 百分比 值 来 设置 文本 的 顶 边 距 。 


«html» 

«head» 

«style type="text/css"> 
p.topmargin 

margin-top: 2596 

H 

«/style» 

</head> 

<body> 


<p>This is a paragraph with no margin specified</p> 
<p class="topmargin">This is a paragraph with a specified top margin</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 外 边 距 
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W3School CSS 参考 手册 


CSS margin-top 属性 279 


Marquee 属性 


属性 
marquee-direction 
marquee-play-count 
marquee-speed 


marquee-style 


C CO C O 


CSS 


多 列 属 性 (Multi-column) 


属性 
column-count 
column-fill 
column-gap 
column-rule 
column-rule-color 
column-rule-style 
column-rule-width 
column-span 
column-width 


columns 


描述 
规定 元 素 应 该 被 分 隔 的 列 数 。 
规定 如 何 填充 列 。 
规定 列 之 间 的 间隔 。 
设置 所 有 column-rule-* 属性 的 简写 属性 。 


列 之 间 规则 的 祥 式 。 
列 之 间 规则 的 宽度 。 


定 

定 

定 
规定 元 素 应 该 横 跨 的 列 数 。 
定 

定 设 





CSS 


C CQ CQ CQ CQ OQ CQ OQ C OQ 


CSS3 column-count 属性 


实例 

头 

将 div 元 素 中 的 文本 分 为 三 列 : 
div 
-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari 和 Chrome */ 


column-count:3; 


} 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 
IE Firefox Chrome Safari 


Internet Explorer 10 和 Opera 支持 column-count 属性 。 
Firefox 支持 替代 的 -moz-column-count 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-column-count 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-count 属性 。 


定义 和 用 法 
column-count 属性 规定 元 素 应 该 被 划分 的 列 数 。 


默认 值 : auto 
继承 性 : no 


JavaScript 语法 : object.style.columnCount-3 


Opera 


语法 


column-count: number |auto; 


值 描述 测试 
number 元 素 内 容 将 被 划分 的 最 佳 列 数 。 测试 
auto 由 其 他 属性 决定 列 数 ， 上 比如 "column-width"。 测试 


x E T 一 试 = 实例 
Column-count 
把 div 元 素 中 的 文本 划分 为 三 列 。 


<1DOCTYPE html» 

«html» 

«head» 

«style» 

. newspaper 

-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari and Chrome */ 
column-count:3; 

</style> 

</head> 

<body> 

<p><b> 注 释 : </b>Internet Explorer 不 支持 column-count 属性 。</p> 


«div class-"newspaper"» 


人 民 网 北京 2 月 24 日 电 (记者 XIBH)BIZ E EGUGEZORE R HORA, ZXGEBZH25BSEsRERCR, AS TR EE v| pem: 
此 次 国内 成 品 油价 格调 整 幅度 ， 是 按照 现行 国内 成 品 油价 格 形成 机 制 ， 根 据 国际 市 场 油 价 变 化 情况 确定 的 。 去 年 11 月 16 日 
通知 指出 ， 这 次 成 品 油 调价 后 ， 国 家 将 按照 已 建立 的 补贴 机 制 ， 继 续 对 种 粮农 民 、 洛 业 ( 含 远洋 渔业 ) 、 林 业 、 城 市 公交 、 
通知 要 求 ， 中 石油 、 中 石化 、 中 海 油 三 大 公司 要 组 织 好 成 品 油 生产 和 调运 ， 保 持 合理 库存 ， 加 强 综 合 协 调和 应 急 调 度 ， 保 P 


</div> 


</body> 
</html> 


[E] reget] 


相关 页 面 


CSS3 教程 : CSS3 多 列 





CSS3 column-fill 属性 


实例 
规定 如 何 对 列 进行 填充 : 


div 


column-fill:auto; 


浏览 器 支持 


主流 浏览 器 都 不 支持 column-fill 属性 。 


定义 和 用 法 


IE Firefox Chrome Safari 
column-fill 属性 规定 如 何 填充 列 (是 否 进 行 协 调 ) 。 
默认 值 : balance 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.columnFill="auto" 


column-fill: balance|auto; 


Opera 


值 描述 
balance 对 列 进行 协调 。 浏 览 器 应 对 列 长 度 的 差异 进行 最 小 化 处 理 。 
auto 按 顺 序 对 列 进行 填充 ， 列 长 度 会 各 有 不 同 。 


相关 页 面 


CSS3 教程 : CSS3 多 列 


CSS3 column-gap 属性 


"p? 
实例 
规定 列 间 的 间隔 为 40 像素 : 
div 
-moz-column-gap:40px; /* Firefox */ 


-webkit-column-gap:40px; /* Safari 和 Chrome */ 
column-gap:40px; 
} 


页 面 底部 有 更 多 实例 。 


M 大 口 
浏览 器 支持 
IE Firefox Chrome Safari 
Internet Explorer 10 和 Opera 支持 column-gap 属性 。 
Firefox 支持 替代 的 -moz-column-gap 属性 。 


Safari 和 Chrome 支持 蔡 代 的 -webkit-column-gap 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-gap 属性 。 


= 、 : 
column-gap 属性 规定 列 之 间 的 间隔 。 


注释 : 如 果 列 之 间 设 置 了 column-rule， 它 会 在 间隔 中 间 显 示 。 


Opera 


默认 值 : normal 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.columnGap="40px" 
语法 


column-gap: length |normal; 


值 描述 测试 
length 把 列 间 的 间隔 设置 为 指定 的 长 度 。 测试 
normal 规定 列 间 间 隔 为 一 个 常规 的 间隔 。W3C 建议 的 值 是 1em。 测试 


亲 目 试 一 试 - 实例 
Column-gap 


将 div 元 素 中 的 文本 分 为 三 列 ， 并 规定 列 间 30 像素 的 间隔 。 


<!DOCTYPE html» 
«html» 

«head» 

«style» 

. newspaper 


-moz-column-count:3; /* Firefox */ 

-webkit-column-count:3; /* Safari and Chrome */ 
column-count:3; 

-moz-column-gap:30px; /* Firefox */ 

-webkit-column-gap:30px; /* Safari and Chrome */ 
column-gap:30px; 

</style> 

</head> 

<body> 

<p><b> 注 释 : </b>Internet Explorer 不 支持 column-count 属性 。</p> 


«div class-"newspaper"» 
人 民 网 北京 2 月 24 日 电 (记者 刘 阳 ) 国 家 发 展 改革 委 近 日 发 出 通知 ， 决 定 自 2 月 25 日 雳 时 起 将 汽 、 柴 油价 格 每 吨 分 别提 高 : 


此 次 国内 成 品 油价 格调 整 幅 度 ， 是 按照 现行 国内 成 品 油价 格 形成 机 制 ， 根 据 国 际 市 场 油价 变化 情况 确定 的 。 去 年 11 月 16 日 
通知 指出 ， 这 次 成 品 油 调价 后 ， 国 家 将 按照 已 建立 的 补贴 机 制 ， 继 续 对 种 粮农 民 、 渔 业 〔( 含 远洋 渔业 ) 、 林 业 、 城 市 公交 、 
通知 要 求 ， 中 石油 、 中 石化 、 中 海 油 三 大 公司 要 组 织 好 成 品 油 生 产 和 调运 ， 保 持 合理 库存 ， 加 强 综合 协调 和 应 急 调度 ， 保 〖P 


</div> 


</body> 
</html> 


a] EN — 


相关 页 面 


CSS3 教程 : CSS3 多 列 





CSS3 column-rule 属性 


实例 
规定 列 之 间 的 宽度 、 样 式 和 颜色 规则 : 


div 
{ 
-moz-column-rule:3px outset ZffOOff; /* Firefox */ 


-webkit-column-rule:3px outset 4ffOOff; /* Safari 和 Chrome */ 
column-rule:3px outset Zffooff; 


} 
页 面 底部 有 更 多 实例 。 
M - nn 
浏览 器 支持 
IE Firefox Chrome Safari 


Internet Explorer 10 和 Opera 支持 column-rule 属性 。 
Firefox 支持 替代 的 -moz-column-rule 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-column-rule 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-rule 属性 。 


= 、 : 
column-rule 属性 是 一 个 简写 属性 ， 用 于 设置 所 有 column-rule-* 属性 。 


column-rule 属性 设置 列 只 觉得 宽度 、 样 式 和 颜色 规则 。 


Opera 


默认 值 : medium none black 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.columnRule-"3px outset ZHffOOff" 
语法 


column-rule:  column-rule-width | column-rule-style | column-rule-color ; 


值 描述 
column-rule-width 设置 列 之 间 的 宽度 规则 。 
column-rule-style 设置 列 之 间 的 样式 规则 。 
column-rule-color 设置 列 之 间 的 颜色 规则 。 


亲自 试 一 试 - 实例 
Column-rule 


规定 列 之 间 的 宽度 、 样 式 和 颜色 。 


<!DOCTYPE html» 
«html» 

«head» 

«style» 

. newspaper 


-moz-column-count:3; /* Firefox */ 

-webkit-column-count:3; /* Safari and Chrome */ 
column-count:3; 

-moz-column-gap:40px; /* Firefox */ 

-webkit-column-gap:40px; /* Safari and Chrome */ 
column-gap:40px; 

-moz-column-rule:4px outset #ff0000; /* Firefox */ 
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */ 
column-rule:4px outset #ff0000; 

} 

</style> 

</head> 

<body> 

<p><b> 注 释 : </b>Internet Explorer 不 支持 column-count 属性 。</p> 


<div class="newspaper"> 
人 民 网 北京 2 月 24 日 电 (记者 刘 阳 ) 国 家 发 展 改 革 委 近日 发 出 通知 ， 决 定 自 2 月 25 日 震 时 起 将 汽 、 柴 油价 格 每 吨 分 别提 高 


此 次 国内 成 品 油价 格调 整 幅 度 ， 是 按照 现行 国内 成 品 油价 格 形成 机 制 ， 根 据 国 际 市 场 油价 变化 情况 确定 的 。 去 年 11 月 16 日 
通知 指出 ， 这 次 成 品 油 调价 后 ， 国 家 将 按照 已 建立 的 补贴 机 制 ， 继 续 对 种 粮农 民 、 渔 业 ( 含 远洋 渔业 ) 、 林 业 、 城 市 公交 、 
通知 要 求 ， 中 石油 、 中 石化 、 中 海 油 三 大 公司 要 组 织 好 成 品 油 生 产 和 调运 ， 保 持 合理 库存 ， 加 强 综合 协调 和 应 急 调度 ， 保 P 


</div> 


</body> 
</html> 


El m 


相关 页 面 


CSS3 教程 : CSS3 多 列 





CSS3 column-rule-color 属性 


4 


实例 
设置 列 之 间 的 颜色 规则 : 


div 
1 


-moz-column-rule-color:£Zff0000; /* Firefox */ 
-webkit-column-rule-color:4Zff0000; /* Safari 和 Chrome */ 
column-rule-color:£ff0000; 


} 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10 和 Opera 支持 column-rule-color 属性 。 
Firefox 支持 替代 的 -moz-column-rule-color 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-column-rule-color 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-rule-color 属性 。 


= : 
column-rule-color 属性 规定 列 之 间 的 颜色 规则 。 


默认 值 : black 
继承 性 : no 


JavaScript 语法 : object.style.columnRuleColor="#ff00ff" 


* 
` sN, 
证 法 
column-rule-color: color ; 


值 描述 
color 规定 颜色 规则 。 请 参阅 CSS 颜色 值 。 


相关 页 面 


CSS3 教程 : CSS3 多 列 


CSS3 column-rule-style 属性 


M 


实例 
设置 列 之 间 的 颜色 规则 : 


div 
1 


-moz-column-rule-style:dotted; /* Firefox */ 
-webkit-column-rule-style:dotted; /* Safari 和 Chrome */ 
column-rule-style:dotted; 


} 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10 和 Opera 支持 column-rule-style 属性 。 
Firefox 支持 替代 的 -moz-column-rule-style 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-column-rule-style 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-rule-style 属性 。 


= 、 : 
column-rule-style 属性 规定 列 之 间 的 样式 规则 。 


默认 值 : none 
继承 性 : no 


JavaScript 语法 : object.style.columnRuleStyle-"dotted" 


column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset; 


值 
none 
hidden 
dotted 
dashed 
solid 
double 
groove 
ridge 
inset 


outset 


相关 页 面 


描述 
定义 没有 规则 。 
定义 隐藏 规则 。 
定义 点 状 规则 。 
定义 虚线 规则 。 


定义 实 线 规则 。 





定义 双 线 规则 。 

定义 3D grooved 规则 。 该 效果 取决 于 宽度 和 颜色 值 。 
定义 3D ridged 规则 。 该 效果 取决 于 宽度 和 颜色 值 。 
定义 3D inset 规则 。 该 效果 取决 于 宽度 和 颜色 值 。 
定义 3D outset 规则 。 该 效果 取决 于 宽度 和 颜色 值 。 


CSS3 教程 : CSS3 多 列 








CSS3 column-rule-width 属性 


M 


实例 
设置 列 之 间 的 颜色 规则 : 


div 

{ 

-moz-column-rule-width:1px; /* Firefox */ 
-webkit-column-rule-width:1px; /* Safari 和 Chrome */ 
column-rule-width:1px; 


} 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 


IE Firefox Chrome 


Internet Explorer 10 和 Opera 支持 column-rule-width 属性 。 


Firefox 支持 替代 的 -moz-column-rule-width 属性 。 


Safari 


Safari 和 Chrome 支持 替代 的 -webkit-column-rule-width 属性 。 


Opera 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-rule-width 属性 。 


= 、 : 
column-rule-width 属性 规定 列 之 间 的 宽度 规则 。 


默认 值 : 
继承 性 : no 


JavaScript 语法 : object.style.columnRuleWidth-"thin" 


medium 


column-rule-width: thin|medium|thick| length ; 





fü 描述 测试 
thin 定义 纤细 规则 。 测试 
medium 定义 中 等 规则 。 测试 
thick 定义 宽厚 规则 。 测试 
length 规定 规则 的 宽度 。 测试 





相关 页 面 


CSS3 教程 : CSS3 多 列 


CSS3 column-span 属性 


实例 
使 h2 元 素 横 跨 所 有 列 : 


h2 


-webkit-column-span:all; /* Chrome */ 
column-span:all; 


页 面 底部 有 更 多 实例 。 
M - nn 
浏览 器 支持 
IE Firefox Chrome Safari 


Internet Explorer 10 和 Opera 支持 column-span 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-column-span 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-span 属性 。 


定义 和 用 法 


column-span 属性 规定 元 素 应 横 跨 多 少 列 。 


默认 值 : 1 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.columnSpan="all" 


语法 


Opera 


column-span: 1|all; 


值 描述 测试 
1 元 素 应 横 跨 一 列 。 测试 
all 元 素 应 横 跨 所 有 列 。 测试 


相关 页 面 


CSS3 教程 : CSS3 多 列 


CSS3 column-width 属性 


实例 


div 


column-width:100px; 

-moz-column-width:100px; /* Firefox */ 
-webkit-column-width:100px; /* Safari 和 Chrome */ 
} 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10 和 Opera 支持 column-width 属性 。 
Firefox 支持 替代 的 -moz-column-width 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-column-width 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column-width 属性 。 


rm. N 
column-width 属性 规定 列 的 宽度 。 


默认 值 : auto 
继承 性 : no 


JavaScript 语法 : object.style.columnWidth-"100px' 


语法 
Àj 
column-width: auto| length ; 


fü 
auto 由 浏览 器 决定 列 宽 。 
length 规定 列 的 宽度 。 


相关 页 面 


CSS3 教程 : CSS3 多 列 


测试 


测试 


测试 


CSS3 columns 属性 


Hn 
实例 
规定 列 的 宽度 和 列 数 : 
div 
t 
columns:100px 3; 
-moz-columns:100px 3; /* Firefox */ 


-webkit-columns:100px 3; /* Safari 和 Chrome */ 
} 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 
IE Firefox Chrome Safari 


Internet Explorer 10 和 Opera 支持 column 属性 。 
Firefox 支持 替代 的 -moz-column 属性 。 
Safari 和 Chrome 支持 替代 的 -webkit-column 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 column 属性 。 


res. : 
columns 属性 是 一 个 简写 属性 ， 用 于 设置 列 宽 和 列 数 。 


默认 值 : auto auto 
继承 性 : no 


JavaScript 语法 : object.style.columns-"100px 3" 


Opera 


* 
b: * 
语 法 
columns:  column-width _column-count_; 


值 
column-width 


column-count 


相关 页 面 
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列 的 宽度 。 
列 数 。 


CSS 内 边 距 属性 (Padding) 


属性 描述 css 
padding 在 一 个 声明 中 设置 所 有 内 边 距 属性 。 1 
padding-bottom 设置 元 素 的 下 内 边 距 。 1 
padding-left 设置 元 素 的 左 内 边 距 。 1 
padding-right 设置 元 素 的 右 内 边 距 。 1 


padding-top 设置 元 素 的 上 内 边 距 。 1 


CSS padding 属性 


实例 
设置 p 元 素 的 4 个 内 边 距 : 


p 


padding:2cm 4cm 3cm 4cm; 


浏览 器 支持 
所 有 浏览 器 都 支持 padding 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
padding 简写 属性 在 一 个 声明 中 设置 所 有 内 边 距 属性 。 
说 明 


这 个 简写 属性 设置 元 素 所 有 内 边 距 的 宽度 ， 或 者 设置 各 边 上 内 边 距 的 宽度 。 行 内 非 蔡 换 元 素 
上 设置 的 内 边 距 不 会 影响 行 高 计算 ; 因此 ， 如 果 一 个 元 素 婚 有 内 边 距 又 有 背景 ， 从 视觉 上 看 
可 能 会 延伸 到 其 他 行 ， 有 可 能 还 会 与 其 他 内 容重 党 。 元 素 的 背景 会 延伸 穿 过 内 边 距 。 不 人 允许 
指定 负 边 距 值 。 


注释 : 不 允许 使 用 负 值 。 
例子 1 


padding:10px 5px 15px 20px; 


padding:10px 5px 15px; 


上 内 边 距 是 10px 
° x ct 2 Rie 5px 
下 内 边 距 是 15px 


例子 3 


padding:10px 5px; 


边 距 和 下 内 边 距 是 10px 
边 距 和 左 内 边 距 是 5px 


Bb F 
可 可 
& Gm 


padding:10px; 


e 所 有 4 个 内 边 距 都 是 10px 


默认 值 : 0 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.padding="10px 5px" 


可 能 的 值 


值 描述 
auto 浏览 器 计算 内 边 距 。 
length 规定 以 具体 单位 计 的 内 边 距 值 ， 上 比如 像素 、 厘 米 等 。 默 认 值 是 0px。 
基于 父 元 素 的 宽度 的 百分比 的 内 边 距 。 
应 该 从 父 元 素 继承 内 边 距 。 


% 规 


inherit 规 


TIY 实例 


所 有 内 边 距 属性 在 一 个 声明 中 
本 例 演示 使 用 简写 属性 将 所 有 的 内 边 距 属性 设置 于 一 个 声明 中 ， 可 以 有 一 到 四 个 值 。 


«html» 

«head» 

«style type="text/css"> 
td.testi (padding: 1.5cmj 
td.test2 (padding: 0.5cm 2.5cmj 
«/style» 

</head> 


<body> 

<table border="1"> 

«tr» 

«td class="test1"> 

这 个 表格 单元 的 每 个 边 拥 有 相等 的 内 边 距 。 
«/td» 

«/tr» 

«/table» 

«br /» 

«table border="1"> 

«tr» 

«td class-"test2'» 

这 个 表格 单元 的 上 和 下 内 边 距 是 9.5cm， 左 和 右 内 边 距 是 2.5cm. 
«/td» 

«/tr» 

«/table» 

«/body» 


</html> 


相关 页 面 


CSS 教程 : CSS 内 边 距 


HTML DOM 参考 手册 : padding 属性 


CSS padding-bottom 属性 


实例 
设置 p 元 素 的 下 内 边 距 : 


p 


{ 
padding-bottom:2cm; 


(在 页 面 底部 可 以 找到 更 多 实例 ) 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 padding-bottom 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


ri 、 N 

定义 和 用 法 

padding-bottom 属性 设置 元 素 的 下 内 边 距 (底部 空白 ) 。 

说 明 

该 属性 设置 元 素 下 内 边 距 的 宽度 。 行 内 非 蔡 换 元 素 上 设置 的 下 内 边 距 不 会 影响 行 高 计算 ， 


此 ， 如 果 一 个 元 素 既 有 内 边 距 又 有 背景 ， 从 视觉 上 看 可 能 延伸 到 其 他 行 ， 有 可 能 还 会 与 其 他 
AREZ., TIHE A AREA. 


注释 : 不 允许 使 用 负 值 。 


默认 值 : 0 
继承 性 : no 


版 本 : CSS1 


JavaScript 语法 : object.style.paddingBottom="10px" 


可 能 的 值 


值 描述 
length ”规定 以 具体 单位 计 的 固定 的 下 内 边 距 值 ， 比 如 像素 、 厘 米 等。 默认 值 是 0px。 
% 定义 基于 父 元 素 宽度 的 百分比 下 内 边 距 。 此 值 不 会 如 预期 地 那样 工作 于 所 有 的 
d 浏览 器 中 。 


inherit ”规定 应 该 从 父 元 素 继 承 下 内 边 距 。 


TIY 实例 


设置 下 内 边 距 1 


本 例 演示 如 何 使 用 厘米 值 来 设置 单元 格 的 下 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td (padding-bottom: 2cm} 
«/style» 

</head> 


<body> 

<table border="1"> 
«tr» 

«td» 

这 个 表格 单元 拥有 下 内 边 距 。 
«/td» 

«/tr» 

«/table» 

«/body» 


«/html» 


设置 下 内 边 距 2 


本 例 演示 如 何 使 用 百分比 值 来 设置 单元 格 的 下 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td 


E 
padding-bottom: 1096 


«/style» 
</head> 
<body> 


<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 下 内 边 距 。 
«/td» 

«/tr» 

«/table» 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 内 边 距 


HTML DOM 参考 手册 : paddingBottom 属性 


CSS padding-left 属性 


实例 
设置 p 元 素 的 左 内 边 距 : 


p 


{ 
padding-left:2cm; 


(在 页 面 底部 可 以 找到 更 多 实例 ) 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 padding-left 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
padding-left 属性 设置 元 素 左 内 边 距 (空白 ) 。 
说 明 


该 属性 设置 元 素 左 内 边 距 的 宽度 。 行 内 非 蔡 换 元 素 上 设置 的 左 内 边 距 仅 在 元 素 所 生成 的 第 一 
个 行内 框 的 左边 出 现 . 


注释 : 不 允许 使 用 负 值 。 


默认 值 : 0 
继承 性 : no 


版 本 : CSS1 


JavaScript 语法 : object.style.paddingLeft="10px" 


可 能 的 值 


值 描述 
length 规定 以 具体 单位 计 的 固定 的 左 内 边 距 值 ， 比 如 像素 、 厘 米 等 。 上 默认 值 是 0px。 


定义 基于 父 元 素 宽度 的 百分比 左 内 边 距 。 此 值 不 会 如 预期 地 那样 工作 于 所 有 的 
浏览 器 中 。 


inherit ”规定 应 该 从 父 元 素 继 承 左 内 边 距 。 


% 


TIY 实例 


设置 左 内 边 距 1 


本 例 演示 如 何 使 用 厘米 值 来 设置 单元 格 的 左 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td (padding-left: 2cm} 
«/style» 

</head> 


<body> 

<table border="1"> 
«tr» 

«td» 

这 个 表格 单元 拥有 左 内 边 距 。 
«/td» 

«/tr» 

«/table» 

«/body» 


«/html» 


设置 左 内 边 距 2 


本 例 演示 如 何 使 用 百分比 值 来 设置 单元 格 的 左 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td 


E 
padding-left: 1096 


«/style» 
</head> 
<body> 


<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 左 内 边 距 。 
«/td» 

«/tr» 

«/table» 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 内 边 距 


HTML DOM 参考 手册 : paddingLeft 属性 


CSS padding-right 属性 


实例 
设置 p 元 素 的 右 内 边 距 : 


p 


{ 
padding-right:2cm; 
(在 页 面 底部 可 以 找到 更 多 实例 ) 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 padding-right 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

padding-right 属性 设置 元 素 右 内 边 距 (空白 ) 。 
注释 : 不 允许 使 用 负 值 。 

说 明 


该 属性 设置 元 素 右 内 边 距 的 宽度 。 行 内 非 蔡 换 元 素 上 设置 的 右 内 边 距 仅 在 元 素 所 生成 的 第 一 
个 行内 框 的 右边 出 现 . 


默认 值 : 0 
继承 性 : no 


版 本 : CSS1 


JavaScript 语法 : object.style.paddingRight-" 10px" 


可 能 的 值 


值 描述 
length ”规定 以 具体 单位 计 的 固定 的 右 内 边 距 值 ， 上 比如 像素 、 厘 米 等 。 默 认 值 是 0px。 


定义 基于 父 元 素 宽 度 的 百分比 右 内 边 距 。 此 值 不 会 如 预期 地 那样 工作 于 所 有 的 
浏览 器 中 。 


inherit ”规定 应 该 从 父 元 素 继 承 右 内 边 距 。 


% 


TIY 实例 


设置 右 内 边 距 1 


本 例 演示 如 何 使 用 厘米 值 来 设置 单元 格 的 右 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td (padding-right: 5cm} 
«/style» 

</head> 


<body> 

<table border="1"> 
«tr» 

«td» 

这 个 表格 单元 拥有 右 内 边 距 。 
«/td» 

«/tr» 

«/table» 

«/body» 


«/html» 


设置 右 内 边 距 2 


本 例 演示 如 何 使 用 百分比 值 来 设置 单元 格 的 右 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td 


padding-right: 10% 


</style> 
</head> 
<body> 


<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 右 内 边 距 。 
«/td» 

«/tr» 

«/table» 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 内 边 距 


HTML DOM 参考 手册 : paddingRight 属性 


CSS padding-top 属性 


实例 
设置 p 元 素 的 上 内 边 距 : 


p 


{ 
padding-top:2cm; 


(在 页 面 底部 可 以 找到 更 多 实例 ) 


浏览 器 支持 

所 有 主流 浏览 器 都 支持 padding-top 属性 。 

注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 

= . N 

定义 和 用 法 

padding-top 属性 设置 元 素 的 上 内 边 距 (空间) 。 

说 明 

该 属性 设置 元 素 上 内 边 距 的 宽度 。 行 内 非 蔡 换 元 素 上 设置 的 上 内 边 距 不 会 影响 行 高 计算 ， 


此 ， 如 果 一 个 元 素 既 有 内 边 距 又 有 背景 ， 从 视觉 上 看 可 能 延伸 到 其 他 行 ， 有 可 能 还 会 与 其 他 
AREZ., TIHE A AREA. 


注释 : 不 允许 使 用 负 值 。 


默认 值 : 0 
继承 性 : no 


版 本 : CSS1 


JavaScript 语法 : object.style.padding Top="1 0px" 


可 能 的 值 


值 描述 
length ”规定 以 具体 单位 计 的 固定 的 上 内 边 距 值 ， 上 比如 像素 、 厘 米 等 。 默 认 值 是 0px。 
ok 定义 基于 父 元 素 宽 度 的 百分比 上 内 边 距 。 此 值 不 会 如 预期 的 那样 工作 于 所 有 的 
d 浏览 器 中 。 


inherit ”规定 应 该 从 父 元 素 继承 上 内 边 距 。 


TIY 实例 


设置 上 内 边 距 1 


本 例 演示 如 何 使 用 厘米 值 来 设置 单元 格 的 上 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td (padding-top: 2cm} 
«/style» 

</head> 


<body> 

<table border="1"> 
«tr» 

«td» 

这 个 表格 单元 拥有 上 内 边 距 。 
«/td» 

«/tr» 

«/table» 

«/body» 


«/html» 


设置 上 内 边 距 2 


本 例 演示 如 何 使 用 百分比 值 来 设置 单元 格 的 上 内 边 距 。 


«html» 

«head» 

«style type="text/css"> 
td 


E 
padding-top: 10% 


</style> 
</head> 
<body> 


<table border="1"> 
<tr> 

<td> 

这 个 表格 单元 拥有 上 内 边 距 。 
«/td» 

«/tr» 

«/table» 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 内 边 距 


HTML DOM 参考 手册 : paddingTop 属性 


Paged Media 属性 


属性 
fit 
fit-position 


image- 
orientation 


page 


size 


描述 


示意 如 何 对 width 和 height 属 性 均 不 是 auto 的 被 替换 元 素 进 行 
缩放 。 


定义 盒 内 对 象 的 对 齐 方 式 。 
规定 用 户 代理 应 用 于 图 像 的 顺 时 针 方 向 旋转 。 


定 元 素 应 该 被 显示 的 页 面 特定 类 型 。 
规定 页 面 内 容 包 含 框 的 尺寸 和 方向 。 


CSS 


CSS 定位 属性 (Positioning) 


属性 
bottom 
clear 
clip 
cursor 
display 
float 
left 
overflow 
position 
right 
top 
vertical-align 
visibility 


z-index 


Ep] 


规 


规 


设置 
JLXEJU 


p ato mi is is s n 二 [ul " fa} 


描述 


定位 元 素 下 外 边 距 边界 与 其 包含 块 下 边界 之 间 的 偏 移 。 

素 的 哪 一 侧 不 允许 其 他 浮动 元 素 。 

裁 绝对 定位 元 素 。 
示 的 光标 的 类 型 (形状 ) 。 

元 素 应 该 生成 的 框 的 类 型 。 


要 显 
定 
当 
元 
定 
定 


元 


元 


是 否 应 该 浮动 。 
位 元 素 左 外 边 


边界 与 其 包含 块 左 边界 之 间 的 偏 移 。 


内 容 渝 出 元 素 框 时 发 生 的 事情 。 

素 的 定位 类 型 。 

位 元 素 右 外 边 距 边界 与 其 包含 块 右边 界 之 间 的 偏 移 。 
位 元 素 的 上 外 边 距 边界 与 其 包含 块 上 边界 之 间 的 偏 移 。 
素 的 垂直 对 齐 方 式 。 

素 是 否 可 见 


JURE HE I FR 


CSS 


CSS bottom 属性 


实例 
把 图 像 的 底 按 缘 设 置 在 其 包含 元 素 底 边缘 之 上 5 像素 高 的 位 置 : 
Img 


position:absolute; 
bottom:5px; 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 bottom 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


me. : 

bottom 属性 规定 元 素 的 底部 边缘 。 该 属性 定义 了 定位 元 素 下 外 边 距 边界 与 其 包含 块 下 边界 之 
间 的 偏 移 。 

注释 : 如 果 "position" 属性 的 值 为 "static"， 那 么 设置 "bottom" 属性 不 会 产生 任何 效果 。 


说 明 
对 于 static 元 素 ， 为 auto ; 对 于 长 度 值 ， 则 为 相应 的 绝对 长 度 ; 对 于 百分比 数值 ， 为 指定 
[à ; 否则 为 auto, 


对 于 相对 定义 元 素 ， 如 果 bottom 和 top 都 是 auto， 其 计算 值 则 都 是 0 ; 如 果 其 中 之 一 为 
auto， 则 取 另 一 个 值 的 相反 数 ; 如 果 二 者 都 不 是 auto，bottom 将 取 top 值 的 相反 数 。 


默认 值 : auto 


继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.bottom-"50px" 


可 能 的 值 


值 描述 
auto 默认 值 。 通 过 浏览 器 计算 底部 的 位 置 。 
% 设置 以 包含 元 素 的 百分比 计 的 底 边 位 置 。 可 使 用 负 值 。 
length 使 用 px cm 等 单位 设置 元 素 的 底 边 位 置 。 可 使 用 负 值 。 
inherit 规定 应 该 从 父 元 素 继 承 bottom 属性 的 值 。 


TIY 实例 


使 用 像素 值 设 置 图 像 的 底部 边缘 
本 例 演示 如 何 使 用 像素 值 设置 图 像 的 底部 边缘 。 


«html» 

«head» 

«style type="text/css"> 
img 

1 

position:absolute; 
bottom:0Opx 


«/style» 

«/head» 

«body» 

<h1> 这 是 标题 </h1> 

«img class-"normal" srcz"/i/eg smile.gif" /> 


<p> 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。</p> 


«/body» 
</html> 


使 用 百分比 设置 图 像 的 底部 边缘 
本 例 演示 如 何 使 用 百分比 值 设 置 图 像 的 底部 边缘 。 


«html» 

«head» 

«style type="text/css"> 
img 

{ 

position:absolute; 
bottom: 5% 


</style> 

</head> 

<body> 

<h1> 这 是 标题 </h1> 

«img class-"normal" srcz"/i/eg smile.gif" /> 


<p> 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。</p> 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 


HTML DOM 参考 手册 : bottom 属性 


CSS clear 属性 


实例 
图 像 的 左 侧 和 右 侧 均 不 允许 出 现 浮 动 元 素 : 


Img 


t 
float:left; 
clear:both; 


浏览 器 支持 
IE Firefox Chrome 


所 有 主流 浏览 器 都 支持 clear 属性 。 


Safari Opera 


注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 


clear 属性 规定 元 素 的 哪 一 侧 不 允许 其 他 浮动 元 素 。 


说 明 


clear 属性 定义 了 元 素 的 哪 边 上 不 允许 出 现 浮动 元 素 。 在 CSS1 和 CSS2 中 ， 这 是 通过 自动 为 
清除 元 素 ( 即 设置 了 clear 属性 的 元 素 ) 增加 上 外 边 距 实现 的 。 在 CSS2.1 中 ， 会 在 元 素 上 外 
边 距 之 上 增加 清除 空间 ， 而 外 边 距 本 身 并 不 改变 。 不 论 哪 一 种 改变 ， 最 终结 果 都 一 样 ， 如 果 
声明 为 左边 或 右边 清除 ， 会 使 元 素 的 上 外 边框 边界 刚好 在 该 边 上 浮动 元 素 的 下 外 边 距 边界 之 


下 。 


默认 值 : none 


继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.clearz"left" 


可 能 的 值 


值 描述 
left 在 左 侧 不 允许 浮动 元 素 。 
right 在 右 侧 不 允许 浮动 元 素 。 
both 在 左右 两 侧 均 不 允许 浮动 元 素 。 
none 默认 值 。 人 允许 浮动 元 素 出 现在 两 侧 。 
inherit 规定 应 该 从 父 元 素 继 承 clear 属性 的 值 。 


TIY 实例 


清除 元 素 的 侧面 
本 例 演示 如 何 使 用 清除 元 素 侧面 的 浮动 元 素 。 


«html» 


«head» 
«style type="text/css"> 
img 


t 
float:left; 
clear:both; 


j 
«/style» 
</head> 
<body> 
«img src="/i/eg_smile.gif" /> 
<img src="/i/eg_smile.gif" /> 
</body> 


«/html» 


相关 页 面 


W3School CSS 参考 手册 


CSS 教程 : CSS 定位 


HTML DOM 参考 手册 : clear 属性 





H 
ux 


CSS clear 属 327 





CSS clip 属性 


实例 
剪裁 图 像 : 
Img 


position:absolute; 
clip:rect(0px, 60px, 200px, 0px); 
} 


浏览 器 文 持 


所 有 主流 浏览 器 都 支持 clip 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
clip 属性 剪裁 绝对 定位 元 素 。 
当 一 幅 图 像 的 尺寸 大 于 包含 它 的 元 素 时 会 发 生 什 么 呢 ? "clip" 属性 允许 您 规定 一 个 元 素 的 可 见 
尺寸 ， 这 样 此 元 素 就 会 被 修剪 并 显示 为 这 个 形状 。 
说 明 
b FEM LIN 个 绝对 定义 元 素 ， 在 这 个 矩形 内 的 内 容 才 可 见 。 出 


这 个 剪裁 区 域 的 内 容 会 根据 overflow 的 值 来 处 理 。 剪 裁 区 域 可 能 比 元 素 的 内 容 区 大 ， 也 可 
ER 


默认 值 : auto 
继承 性 : no 


JavaScript 语法 : object.style.clip="rect(0px,50px,50px,0px)" 


可 能 的 值 


值 描述 
shape 设置 元 素 的 形状 。 唯 一 合法 的 形状 值 是 : rect (top, right, bottom, left) 
auto Ao TEL FBEETISS AX 
inherit 规定 应 该 从 父 元 素 继承 clip 属性 的 值 。 


44 


TIY 实例 


设置 元 素 的 形状 
本 例 演示 如 何 设置 元 素 的 形状 。 此 元 素 被 剪 人 形状 中 ， 然 后 显示 出 来 。 


«html» 

«head» 

«style type="text/css"> 

img 

t 

position:absolute; 
clip:rect(Opx 50px 200px Opx) 


«/style» 
</head> 


<body> 

<p>clip 属性 剪 切 了 一 幅 图 像 : </p> 

<p><img border="0" srcz"/i/eg bookasp.gif" width="120" height="151"></p> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 定位 


HTML DOM 参考 手册 : clip 属性 


CSS cursor 属性 


例 


一 些 不 同 的 光标 : 


将 


span.crosshair (cursor:crosshair;) 
span.help {cursor:help;} 
span.wait [cursor:wait;) 


浏览 器 支持 
IE Firefox Chrome 


所 有 主流 浏览 器 都 支持 cursor 属性 。 
注释 : Opera 9.3 和 Safari 3 不 支持 url 值 。 


Safari Opera 


注释 : 任何 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 


cursor 属性 规定 要 显示 的 光标 的 类 型 (形状 ) 。 


该 属性 定义 了 鼠标 指针 放 在 一 个 元 素 边 界 范围 内 时 所 用 的 光标 形状 (不 过 CSS2.1 没有 定义 


由 哪个 边界 确定 这 个 范围 ) 。 


默认 值 : auto 
继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.cursor="crosshair" 


可 能 的 值 


值 描述 


url 
需 使 用 的 自 定义 光标 的 URL。 
注释 : 请 在 此 列表 的 末端 始终 定义 一 种 普通 的 光标 ， 以 防 没有 由 URL 定义 的 可 用 光标 。 


| | default | 默认 光标 (通常 是 一 个 箭头 ) | | auto | 默认 。 浏 览 器 设置 的 光标 。 | | crosshair | 
光标 呈现 为 十 字 线 。 | | pointer | 光标 呈现 为 指示 链接 的 指针 (一 只 手 ) || move | 此 光标 指示 
某 对 象 可 被 移动 。 | | e-resize | 此 光标 指示 矩形 框 的 边缘 可 被 向 右 〈 东 ) 移动 。 | | ne-resize | 
此 光标 指示 和 矩形 框 的 边缘 可 被 向 上 及 向 右 移 动 ( 北 / 东 ) 。 || nw-resize | 此 光标 指示 矩形 框 的 
边缘 可 被 向 上 及 向 左 移动 ( 北 / 西 ) 。 | | n-resize | 此 光标 指示 和 矩形 框 的 边缘 可 被 向 上 ( 北 ) 
移动 。 | | se-resize | 此 光标 指示 和 矩形 框 的 边缘 可 被 向 下 及 向 右 移 动 (B3). | | sw-resize | 
此 光标 指示 矩 形 框 的 边缘 可 被 向 下 及 向 左 移动 (A/A) 。 | | s-resize | 此 光标 指示 和 矩形 框 的 
边缘 可 被 向 下 移动 ( 南 ) 。 | | w-resize | 此 光标 指示 矩形 框 的 边缘 可 被 向 左 移动 ( 西 ) || 
text | 此 光标 指示 文本 。 | | wait | 此 光标 指示 程序 正 忙 (通常 是 一 只 表 或 沙漏 ) 。 | | help | 此 
光标 指示 可 用 的 帮助 〈 通 常 是 一 个 问号 或 一 个 气球 ) 。 | 


TIY 实例 


改变 光标 
本 例 演示 如 何 改变 光标 。 


«html» 


«body» 

<p> 请 把 鼠标 移动 到 单词 上 ， 可 以 看 到 鼠标 指针 发 生变 化 : </p> 
«span style-z'cursor:auto'» 
Autoc/span»«br /> 

«span stylez'cursor:crosshair"» 
Crosshair«/span»«br /> 

«span style="cursor :default"> 
Default</span><br /> 

<span style="cursor :pointer"> 
Pointer</span><br /> 

<span style="cursor :move"> 
Move</span><br /> 

<span style="cursor:e-resize"> 
e-resize</span><br /> 

<span style="cursor:ne-resize"> 
ne-resize</span><br /> 

<span style="cursor :nw-resize"> 
nw-resize</span><br /> 

<span style="cursor:n-resize"> 
n-resize</span><br /> 

<span style="cursor :se-resize"> 
se-resize</span><br /> 

<span style="cursor :sw-resize"> 
sw-resize</span><br /> 

<span style="cursor:s-resize"> 
s-resize</span><br /> 

<span style="cursor:w-resize"> 
w-resize</span><br /> 

<span style="cursor :text"> 
text</span><br /> 

<span style="cursor :wait"> 
wait</span><br /> 

<span style="cursor :help"> 
help</span> 

</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 定位 


HTML DOM 参考 手册 : cursor 属性 


CSS display 属性 


例 


使 段落 生出 行内 框 : 


将 


p.inline 


display:inline; 


浏览 器 支持 
IE Firefox Chrome Safari 


所 有 主流 浏览 器 都 支持 display 属性 。 


Opera 


注释 : 如 果 规 定 了 IDOCTYPE, W) Internet Explorer 8 (以 及 更 高 版 本 ) 支持 属性 值 "inline- 
table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column- 


group". "table-row", "table-row-group", LX "inherit", 
rm. N 
display 属性 规定 元 素 应 该 生成 的 框 的 类 型 。 


说 明 


这 个 属性 用 于 定义 建立 布局 时 元 素 生 成 的 显示 框 类 型 。 对 于 HTML 等 文档 类 型 ， 如 果 使 用 
display 不 天 慎 会 很 危险 ， 因 为 可 能 违反 HTML 中 已 经 定义 的 显示 层次 结构 。 对 于 XML, FH 


于 XML 没有 内 和 置 的 这 种 层次 结构 ， 所 有 display 是 绝对 必要 的 。 


注释 : CSS2 中 有 值 compact 和 marker， 不 过 由 于 缺乏 广泛 的 支持 ， 已 经 从 CSS2.1 中 去 除 


了 。 


默认 值 : 


inline 


object.style.display-"inline" 


none 
block 

inline 
inline-block 
list-item 


run-in 


compact 


marker 


table 


inline-table 


table-row-group 


table-header- 
group 


table-footer- 
group 


table-row 


table-column- 
group 


table-column 
table-cell 
table-caption 


inherit 


描述 
此 元 素 不 会 被 显示 。 
此 元 素 将 显示 为 块 级 元 素 ， 此 元 素 前 后 会 带 有 换行 符 。 
默认 。 此 元 素 会 被 显示 为 内 联 元 素 ， 元 素 前 后 没有 换行 符 。 
行内 块 元 素 。 (CSS2.1 新 增 的 值 ) 
此 元 素 会 作为 列表 显示 。 
此 元 素 会 根据 上 下 文 作为 块 级 元 素 或 内 联 元 素 显 示 。 


CSS 中 有 值 compact， 不 过 由 于 缺乏 广泛 支持 ， 已 经 从 CSS2.1 中 
删除 。 


CSS 中 有 值 marker， 不 过 由 于 缺乏 广泛 支持 ， 已 经 从 CSS2.1 mi 
除 。 


此 元 素 会 作为 块 级 表格 来 显示 (类 似 <table>) ， 表 格 前 后 带 有 换行 


Jo 


此 元 素 会 作为 内 联 表 格 来 显示 (类似 <table>) ， 表 格 前 后 没有 换行 


No 


此 元 素 会 作为 一 个 或 多 个 行 的 分 组 来 显示 (类 似 <tbody>) 。 


此 元 素 会 作为 一 个 或 多 个 行 的 分 组 来 显示 (类 似 <thead>) 。 


此 元 素 会 作为 一 个 或 多 个 行 的 分 组 来 显示 (类 似 <tfoot>) 。 
此 元 素 会 作为 一 个 表格 行 显示 (类 似 <tr>) 。 
此 元 素 会 作为 一 个 或 多 个 列 的 分 组 来 显示 (类 似 <colgroup>) 。 


此 元 素 会 作为 一 个 单元 格 列 显示 (GEL <col>) 

此 元 素 会 作为 一 个 表格 单元 格 显示 (类似 <td> 和 <th>) 
此 元 素 会 作为 一 个 表格 标题 显示 (类似 <caption>) 
规定 应 该 从 父 元 素 继承 display 属性 的 值 。 


TIY 实例 


如 何 把 元 素 显 示 为 内 联 元 素 
本 例 演示 如 何 把 元 素 显示 为 内 联 元 素 。 


«html» 

«head» 

«style type="text/css"> 
p (display: inline} 

div (display: none} 
«/style» 

</head> 


<body> 
<p> 本 例 中 的 样式 表 把 段落 元 素 设置 为 内 联 元 素 。</p> 


<p> 而 div 元 素 不 会 显示 出 来 </p> 
<div>div 元 素 的 内 容 不 会 显示 出 来 ! </div> 


</body> 
</html> 


如 何 把 元 素 显 示 为 块 级 元 素 


本 例 演示 如 何 把 元 素 显示 为 块 级 元 素 。 


«html» 

«head» 

«style type="text/css"> 
span 

t 

display: block 


} 
</style> 
</head> 
<body> 


<span> 本 例 中 的 样式 表 把 _ span 元 素 设置 为 块 级 元 素 。</span> 
<span> 两 个 span 元 素 之 间 产 生 了 一 个 换行 行为 。</span> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 


HTML DOM 参考 手册 : display 属性 


CSS float 属性 
实例 


把 图 像 向 右 浮动 : 


img 


{ 
float:right; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 float 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 


E uud 以 往 这 个 属性 总 应 用 于 图 像 ， 使 文本 围绕 在 图 像 周围 ， 
过 在 CSS 中 ， 任 何 元 素 都 可 以 浮动 。 浮 动 元 素 会 生成 一 个 块 级 框 ， 而 不 论 它 本 身 是 何 种 元 
x 


如 果 浮 动 非 蔡 换 元 素 ， 则 要 指定 一 个 明确 的 宽度 ; 否则 ， 它 们 会 尽 可 能 地 窦 。 


注释 : 假如 在 一 行 之 上 只 有 极 少 的 空间 可 供 浮动 元 素 ， 那 么 这 个 元 素 会 跳 至 下 一 行 ， 这 个 过 
程 会 持续 到 某 一 行 拥有 足够 的 空间 为 止 。 


默认 值 : none 
继承 性 : no 


JavaScript 语法 : object.style.cssFloat-"left" 


可 能 的 值 


5b 


值 描 3 
left 元 素 向 左 浮动 
right 元 素 向 右 浮动 
none 默认 值 。 元 素 不 浮动 ， 并 会 显示 在 其 在 文本 中 出 现 的 位 置 
inherit 规定 应 该 从 父 元 素 继承 float 属性 的 值 。 


TIY 实例 


float 属性 的 简单 应 用 
使 图 像 浮动 于 一 个 段落 的 右 侧 。 


«html» 

«head» 

«style type="text/css"> 
img 

{ 

float:right 


} 
</style> 
</head> 


<body> 


<p> 在 下 面 的 段落 中 ， 我 们 添加 了 一 个 样式 为 <b>float :right</b> 的 图 像 。 结 果 是 这 个 图 像 会 浮动 到 段落 的 右 侧 。< 


<p> 
«img src="/i/eg_cute.gif" /> 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
</p> 

</body> 


«/html» 


«| — zu] - 
将 带 有 边框 和 边界 的 图 像 浮动 于 段落 的 右 侧 
使 图 像 ; 孕 动 于 段落 的 右 侧 。 向 图 像 添 加 ER ERMA Fo 





«html» 

«head» 

«style type="text/css"> 
img 


float:right; 
border:1px dotted black; 
margin:Opx 0px 15px 20px; 


</style> 

</head> 

<body> 

<P>E FERAH, ARRAZAREN, HERMT RARE REA ARRIT AE, aAA 
<p> 


«img src="/i/eg_cute.gif" /> 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
</p> 

</body> 


</html> 





带 标题 的 图 像 浮 动 于 右 例 
使 带 有 标题 的 图 像 浮动 于 右 侧 


«html» 

«head» 

«style type="text/css"> 
div 


float:right; 
width:120px; 

margin:O © 15px 20px; 
padding:15px; 
border:1px solid black; 
text-align:center; 


«/style» 
«/head» 


«body» 

«div» 

«img srcz"/i/eg cute.gif" /»«br /> 

CSS is fun! 

«/div» 

«p» 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
</p> 


<p> 
在 上 面 的 段落 中 ，div 元 素 的 宽度 是 120 像素 ， 
«/p» 

«/body» 


中 包含 图 像 。div 元 素 浮动 到 右 侧 。 我 们 向 div TRAIT è 


a 
I 


«/html» 
国王 
使 段落 的 首 字母 浮动 于 左 侧 





使 段落 的 首 字 母 浮动 于 左 侧 ， 并 向 这 个 字母 添加 祥 式 。 


«html» 

«head» 

«style type="text/css"> 
span 


{ 

float:left; 

width:0.7em; 

font-size:400%; 
font-family:algerian, courier; 
line-height :80%; 


</style> 
</head> 


<body> 

<p> 

<span>T</span>his is some text. 

This is some text. This is some text. 

This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
</p> 


<p> 
在 上 面 的 段落 中 ， 文 本 的 第 一 个 字母 包含 在 一 个 span 元 素 中 。 这 个 span 元 素 的 宽度 是 当前 字体 尺寸 的 0.7 fo sp 
</p> 


</body> 
</html> 


S N 
创建 水 平 菜单 





使 用 具有 一 栏 超 链 接 的 浮动 来 创建 水 平 菜单 。 


«html» 

«head» 

«style type="text/css"> 
ul 


{ 

float:left; 
width:100%; 
padding:0; 

margin:0; 
list-style-type:none; 
} 


a 


{ 

float:left; 

width:7em; 
text-decoration:none; 
color:white; 
background-color:purple; 
padding:0.2em 0.6em; 
border-right:ipx solid white; 
} 

a:hover {background-color:#ff3300} 
li {display:inline} 

</style> 

</head> 


<body> 

«ul» 

<li><a hrefz"£Z'"»Link one«c/a»«/li» 
<li><a hrefz"£Z'"»Link twoc/a»«/li» 
<li><a href="#">Link three«c/a»«/li» 
<li><a href="#">Link four«c/a»«/li» 
«/ul» 


«p» 
在 上 面 的 例子 中 ， 我 们 把 ul 元 素 和 a 元 素 浮 向 左 浮动 。11 元 素 显 示 为 行内 元 素 (元 素 前 后 没有 换行 ) 。 这 样 就 可 以 人 
</p> 





</body> 
</html> 


Rp ——— -——g 
创建 无 表格 的 首页 





使 用 浮动 来 创建 拥有 页 眉 、 页 脚 、 左 侧目 录 和 主体 内 容 的 首页 。 


«html» 

«head» 

«style type="text/css"> 
div.container 


width:10096; 
margin:0Opx; 

border:1px solid gray; 
line-height:15096; 


div.header,div.footer 


padding:0.5em; 
color:white; 
background-color:gray; 
clear:left; 


} 
hi.header 


padding:0; 
margin:0; 
} 
div.left 


t 

float:left; 
width:160px; 
margin:0; 
padding:iem; 

} 

div.content 

{ 
margin-left:190px; 
border-left:1px solid gray; 
padding:iem; 

} 

</style> 

</head> 

<body> 


<div class="container"> 

«div class="header"><h1 class="header">W3School.com.cn</h1i></div> 

«div class="left"><p>"Never increase, beyond what is necessary, the number of entities re 
«div class-"content"» 

«h2»Free Web Building Tutorials«c/h2» 

«p»At W3School.com.cn you will find all the Web-building tutorials you need, 

from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.«/p» 
«p»W3School.com.cn - The Largest Web Developers Site On The Net!«/p»«/div» 


«div class-"footer"»Copyright 2008 by YingKe Investment.«/div» 
«/div» 


«/body» 
</html> 


国 | 


相关 页 面 


CSS 教程 : CSS 定位 





HTML DOM 参考 手册 : cssFloat 属性 


CSS left 属性 


实例 
把 图 像 的 左边 缘 设 置 在 其 包含 元 素 左边 缘 向 右 100 像素 的 位 置 : 


img 
t 
position:absolute; 
left:100px; 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 left 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


= . i 

left 属性 规定 元 素 的 左边 缘 。 该 属性 定义 了 定位 元 素 左 外 边 距 边界 与 其 包含 块 左边 界 之 间 的 偏 
移 。 

注释 : 如 果 "position" 属性 的 值 为 "static"， 那 么 设置 "left" 属性 不 会 产生 任何 效果 。 


说 明 
对 于 static 元 素 ， 为 auto ; 对 于 长 度 值 ， 则 为 相应 的 绝对 长 度 ; 对 于 百分比 数值 ， 为 指定 
值 ; 人 否则 为 auto, 
对 于 相对 定义 元 素 ，left 的 计算 值 始 终 等 于 right, 
默认 值 : auto 
继承 性 : no 


JavaScript 语法 : object.style.left="100px" 


可 能 的 值 


值 描述 
auto 默认 值 。 通 过 浏览 器 计算 左边 缘 的 位 置 。 
% 设置 以 包含 元 素 的 百分比 计 的 左边 位 置 。 可 使 用 负 值 。 
length 使 用 px. cm 等 单位 设置 元 素 的 左边 位 置 。 可 使 用 负 值 。 
inherit 规定 应 该 从 父 元 素 继承 left 属性 的 值 。 


M 


TIY 实例 


使 用 固定 值 设置 图 像 的 左边 缘 
本 例 演示 如 何 使 用 固定 值 设置 图 像 的 左边 缘 。 


«html» 

«head» 

«style type="text/css"> 
img 

t 

position:absolute; 
left:100px 


«/style» 

</head> 

<body> 

<h1> 这 是 标题 </h1> 

«img class-"normal" srcz"/i/eg smile.gif" /> 


<p> 一 些 文 本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。</p> 


</body> 
</html> 


使 用 百分比 设置 图 像 的 左边 缘 
本 例 演示 如 何 使 用 百分比 值 设置 图 像 的 左边 缘 。 


«html» 

«head» 

«style type="text/css"> 
img 

{ 

position:absolute; 
left:20% 


</style> 

</head> 

<body> 

<h1> 这 是 标题 </h1> 

«img class-"normal" srcz"/i/eg smile.gif" /> 


<p> 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。</p> 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 


HTML DOM 参考 手册 : left 属性 


CSS overflow 属性 


实例 
设置 overflow 属性 : 
div 
t 
width:150px; 
height:150px; 


overflow:scroll; 


} 


浏览 器 支持 

所 有 主流 浏览 器 都 支持 overflow 属性 。 

注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 

overflow 属性 规定 当 内 容 渝 出 元 素 框 时 发 生 的 事情 。 

说 明 


这 个 属性 定义 浴 出 元 素 内 容 区 的 内 容 会 如 何 处 理 。 如 果 值 为 scroll， 不 论 是 否 需要 ， 用 户 代理 
都 会 提供 一 种 滚动 机 制 。 因 此 ， 有 可 能 即使 元 素 框 中 可 以 放下 所 有 内 容 也 会 出 现 滚动 条 。 


默认 值 : visible 
继承 性 : no 
版 本 : CSS2 
JavaScript 语法 : object.style.overflow-"scroll" 


可 能 的 值 


值 描述 
visible 默认 值 。 内 容 不 会 被 修剪 ， 会 呈现 在 元 素 框 之 外 。 
hidden 内 容 会 被 修剪 ， 并 且 其 余 内 容 是 不 可 见 的 。 


scroll 内 容 会 被 修剪 ， 但 是 浏览 器 会 显示 滚动 条 以 便 查 看 其 余 的 内 容 。 
auto 如 果 内 容 被 修剪 ， 则 浏览 器 会 显示 滚动 条 以 便 查看 其 余 的 内 容 。 
inherit 规定 应 该 从 父 元 素 继承 overflow 属性 的 值 。 


TIY 实例 


如 何 使 用 滚动 条 来 显示 元 素 内 浴 出 的 内 容 
本 例 演示 当 元 素 内 容 太 大 而 超出 规定 区 域 时 ， 如 何 设置 浴 出 属性 来 规定 相应 的 动作 。 


«html» 

«head» 

«style type="text/css"> 
div 


background-color :#00FFFF; 
width:150px; 

height :150px; 

overflow: scroll 


} 
</style> 
</head> 


<body> 

<p> 如 果 元 素 中 的 内 容 超出 了 给 定 的 宽度 和 高 度 属性 ，overflow 属性 可 以 确定 是 否 显示 滚动 条 等 行为 。</p> 
<div> 

这 个 属性 定义 渝 出 元 素 内 容 区 的 内 容 会 如 何 处 理 。 如 果 值 为 scro1L1， 不 论 是 否 需要 ， 用 户 代理 都 会 提供 一 种 滚动 机 制 。 
</div> 

</body> 


«/html» 


人 了。 
如 何 隐藏 浴 出 元 素 中 浴 出 的 内 容 





本 例 演示 在 元 素 中 的 内 容 太 大 以 至 于 无 法 适 点 指定 的 区 域 时 ， 如 何 设置 overflow 属性 来 隐藏 
其 内 容 。 


«html» 

«head» 

«style type="text/css"> 
div 


background-color :#00FFFF; 
width:150px; 

height :150px; 

overflow: hidden 


</style> 
</head> 


<body> 

<p> 如 果 元 素 中 的 内 容 超 出 了 给 定 的 宽度 和 高 度 属性 ，overflow 属性 可 以 确定 是 否 显示 滚动 条 等 行为 。</p> 

<div> 

这 个 属性 定义 洽 出 元 素 内 容 区 的 内 容 会 如 何 处 理 。 如 果 值 为 scroll1， 不 论 是 否 需 要 ， 用 户 代理 都 会 提供 一 种 滚动 机 制 。 
</div> 

</body> 


</html> 
| Race a a a 
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«html» 

«head» 

«style type="text/css"> 
div 

{ 

background-color :#00FFFF; 
width:150px; 

height :150px; 

overflow: auto 


} 
</style> 
</head> 


<body> 

<p> 如 果 元 素 中 的 内 容 超 出 了 给 定 的 宽度 和 高 度 属性 ，overflow 属性 可 以 确定 是 否 显示 滚动 条 等 行为 。</p> 

<div> 

这 个 属性 定义 洽 出 元 素 内 容 区 的 内 容 会 如 何 处 理 。 如 果 值 为 scroll1， 不 论 是 否 需 要 ， 用 户 代理 都 会 提供 一 种 滚动 机 制 。 
</div> 

</body> 


</html> 


E E 


相关 页 面 


CSS 教程 : CSS 定位 





HTML DOM 参考 手册 : overflow 属性 


CSS position 属性 


例 


定位 h2 元 素 : 


将 


h2 
t 


position:absolute; 
left:100px; 
top:i150px; 

} 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 position 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


rm . N 
position 属性 规定 元 素 的 定位 类 型 。 
说 明 
这 个 属性 定义 建立 元 素 布 局 所 用 的 定位 机 制 。 任 何 元 素 都 可 以 定位 ， 不 过 绝对 或 固定 元 素 会 
生成 一 个 块 级 框 ， 而 不 论 该 元 素 本 身 是 什么 类 型 。 相 对 定位 元 素 会 相对 于 它 在 正常 流 中 的 默 
认 位 置 偏 移 。 
默认 值 : static 
继承 性 : no 


JavaScript 语法 : object.style.position="absolute 


可 能 的 值 


值 描述 
absolute 
生成 绝对 定位 的 元 素 ， 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进 行 定位 。 
元 素 的 位 置 通 过 "left", "top", "right" EL "bottom" 属性 进行 规定 。 
| | fixed | 
生成 绝对 定位 的 元 素 ， 相 对 于 浏览 器 窗口 进行 定位 。 
元 素 的 位 置 通 过 "left", "top", "right" 以 及 "bottom" 属性 进行 规定 。 
| | relative | 
生成 相对 定位 的 元 素 ， 相 对 于 其 正常 位 置 进行 定位 。 
因此 ，"left:20" 会 向 元 素 的 LEFT 位 置 添 加 20 像素 。 


| | static | 默认 值 。 没 有 定位 ， 元 素 出 现在 正常 的 流 中 (忽略 top, bottom, left, right 或 者 z- 
index 声明 ) 。 | | inherit | 规定 应 该 从 父 元 素 继 承 position 属性 的 值 。 | 
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TIY 实例 
定位 : 相对 定位 


本 例 演示 如 何 相对 于 一 个 元 素 的 正常 位 置 来 对 其 定位 。 


«html» 

«head» 

«style type="text/css"> 
h2.pos left 

{ 

position:relative; 
left: -20px 

} 

h2.pos_right 


position:relative; 
left:20px 


«/style» 
«/head» 


«body» 

<h2> 这 是 位 于 正常 位 置 的 标题 </h2> 

<h2 class="pos_left"> 这 个 标题 相对 于 其 正常 位 置 向 左 移动 </h2> 

<h2 class="pos_right"> 这 个 标题 相对 于 其 正常 位 置 向 右 移动 </h2> 
<p> 相 对 定位 会 按照 元 素 的 原始 位 置 对 该 元 素 进行 移动 。</p> 

<p> 样 式 "left:-20px" 从 元 素 的 原始 左 侧 位 置 减 去 20 RR. </p> 
<p> 样 式 "left:20px" 向 元 素 的 原始 左 侧 位 置 增加 20 RR. </p> 

«/body» 


</html> 


定位 : 绝对 定位 
本 例 演示 如 何 使 用 绝对 值 来 对 元 素 进 行 定位 。 


«html» 

«head» 

«style type="text/css"> 
h2.pos abs 

{ 

position:absolute; 
left:100px; 

top:150px 


} 
</style> 
</head> 


<body> 

<h2 class="pos_abs"> 这 是 带 有 绝对 定位 的 标题 </h2> 

<p> 通 过 绝对 定位 ， 元 素 可 以 放置 到 页 面 上 的 任何 位 置 。 下 面 的 标题 距离 页 面 左 侧 100px， 距 离 页 面 顶部 150px. </p> 
«/body» 


«/html» 
LENLLLLLLLJIIAGÓNNESM Lu 
定位 : 固定 定位 


本 例 演示 如 何 相 对 于 浏览 器 窗口 来 对 元 素 进 行 定 位 。 


«html» 

«head» 

«style type="text/css"> 
p.one 

{ 

position:fixed; 
left:5px; 

top:5px; 


p. two 

{ 
position:fixed; 
top:30px; 
right:5px; 


} 
</style> 
</head> 
<body> 


«p class="one"> 一 些 文 本 。</p> 
«p class="two"> 更 多 的 文本 。</p> 


</body> 
</html> 
设置 元 素 的 形状 


本 例 演示 如 何 设置 元 素 的 形状 。 此 元 素 被 剪裁 到 这 个 形状 内 ， 并 显示 出 来 。 


«html» 

«head» 

«style type="text/css"> 

img 

t 

position:absolute; 
clip:rect(O0px 50px 200px Opx) 


} 
</style> 
</head> 


<body> 

<p>clip 属性 剪 切 了 一 幅 图 像 : </p> 

<p><img border="0" srcz"/i/eg bookasp.gif" width="120" height="151"></p> 
</body> 


</html> 


Z-index 


Z-index 可 被 用 于 将 在 一 个 元 素 放 置 于 另 一 元 素 之 后 。 


«html» 

«head» 

«style type="text/css"> 
img.x 

{ 

position:absolute; 
left:0px; 

top:0px; 

z-index:-1 


</style> 
</head> 


<body> 

<h1> 这 是 一 个 标题 </h1> 

«img class="x" srcz"/i/eg mouse.jpg" /> 

<p> 默 认 的 z-index Æ 0, Z-index -1 拥有 更 低 的 优先 级 。</p> 
«/body» 


</html> 


Z-index 
上 面 的 例子 中 的 元 素 已 经 更 改 了 Z-index。 


«html» 

«head» 

«style type="text/css"> 
img.x 

t 

position:absolute; 
left:Opx; 

top:Opx; 

z-index:1 


} 

</style> 

</head> 

<body> 

<h1> 这 是 一 个 标题 </h1> 

«img class="x" srcz"/i/eg mouse.jpg" /> 

<p> 默 认 的 z-index Æ 0, Z-index 1 拥有 更 高 的 优先 级 。</p> 
«/body» 


</html> 


相关 页 面 


CSS 教程 : CSS 定位 


HTML DOM 参考 手册 : position 属性 


CSS right 属性 


实例 
把 图 像 的 右边 缘 设 置 在 其 包含 元 素 右 边缘 向 左 5 像素 的 位 置 : 
Img 


position:absolute; 
right:5px; 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 right 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 


right 属性 规定 元 素 的 右边 缘 。 该 属性 定义 了 定位 元 素 右 外 边 距 边界 与 其 包含 块 右边 界 之 间 的 
偏 移 。 


注释 : 如 果 "position" 属性 的 值 为 "static"， 那 么 设置 "right" 属性 不 会 产生 任何 效果 。 


说 明 


对 于 static 元 素 ， 为 auto ; 对 于 长 度 值 ， 则 为 相应 的 绝对 长 度 ; 对 于 百分比 数值 ， 为 指定 
值 ; 人 否则 为 auto, 


对 于 相对 定义 元 素 ，left 的 计算 值 始 终 等 于 right, 


默认 值 : auto 
继承 性 : no 


版 本 : CSS2 


JavaScript 语法 : object.style.right-"50px" 


可 能 的 值 


值 描述 
auto 默认 值 。 通 过 浏览 器 计算 右边 缘 的 位 置 。 
% 设置 以 包含 元 素 的 百分比 计 的 右边 位 置 。 可 使 用 负 值 。 
length 使 用 px. cm 等 单位 设置 元 素 的 右边 位 置 。 可 使 用 负 值 。 
inherit 规定 应 该 从 父 元 素 继承 right 属性 的 值 。 


M 


TIY 实例 


使 用 固定 值 设置 图 像 的 右边 缘 
本 例 演示 如 何 使 用 固定 值 设置 图 像 的 右边 缘 。 


«html» 

«head» 

«style type="text/css"> 
img 

t 

position:absolute; 
right:Opx 

«/style» 

</head> 

<body> 

<h1> 这 是 标题 </h1> 

«img class-"normal" src="/i/eg_ smile.gif" /> 


<p> 一 些 文 本 。 一 些 文本 。 一 些 文 本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。</p> 


</body> 
</html> 


使 用 百分比 设置 图 像 的 右边 缘 
本 例 演示 如 何 使 用 百分比 值 设置 图 像 的 右边 缘 。 


«html» 

«head» 

«style type="text/css"> 
img 

{ 

position:absolute; 
right :5% 

</style> 

</head> 

<body> 

<h1> 这 是 标题 </h1> 

«img class-"normal" src="/i/eg_ smile.gif" /> 


<p> 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。</p> 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 


HTML DOM 参考 手册 : right 属性 


CSS top 属性 


实例 
把 图 像 的 上 边缘 设置 在 其 包含 元 素 上 边缘 之 下 5 像素 高 的 位 置 : 
img 


position:absolute; 
top:5px; 
} 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 top 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


c. : 

top 属性 规定 元 素 的 顶部 边缘 。 该 属性 定义 了 一 个 定位 元 素 的 上 外 边 距 边界 与 其 包含 块 上 边界 
之 间 的 偏 移 。 

注释 : 如 果 "position" 属性 的 值 为 "static"， 那 么 设置 "top" 属性 不 会 产生 任何 效果 。 

说 明 

对 于 static 元 素 ， 为 auto ; 对 于 长 度 值 ， 则 为 相应 的 绝对 长 度 ; 对 于 百分比 数值 ， 为 指定 

[à ; 否则 为 auto, 


对 于 相对 定义 元 素 ， 如 果 top 和 bottom 都 是 auto， 其 计算 值 则 都 是 0 ; 如 果 其 中 之 一 为 
auto， 则 取 另 一 个 值 的 相反 数 ; 如 果 二 者 都 不 是 auto，bottom 将 取 top 值 的 相反 数 。 


默认 值 : auto 


继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.top-"50px" 


可 能 的 值 


值 描述 
auto 默认 值 。 通 过 浏览 器 计算 上 边缘 的 位 置 。 
% 设置 以 包含 元 素 的 百分比 计 的 上 边 位 置 。 可 使 用 负 值 。 
length 使 用 px cm 等 单位 设置 元 素 的 上 边 位 置 。 可 使 用 负 值 。 
inherit 规定 应 该 从 父 元 素 继 承 top 属性 的 值 。 


TIY 实例 


使 用 固定 值 设置 图 像 的 上 边缘 
本 例 演示 如 何 使 用 固定 值 设置 图 像 的 上 边缘 。 


«html» 

«head» 

«style type="text/css"> 
img 

{ 

position:absolute; 

top :0pX 

«/style» 

</head> 

<body> 

<h1>This is a Heading</h1> 
«img class-"normal" src="/i/eg_smile.gif" /> 


<p> 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。</p> 


«/body» 
</html> 


使 用 百分比 设置 图 像 的 上 边缘 
本 例 演示 如 何 使 用 百分比 值 设置 图 像 的 上 边缘 。 


«html» 

«head» 

«style type="text/css"> 
img 

{ 

position:absolute; 
top:5% 

</style> 

</head> 

<body> 

<h1> 这 是 标题 </h1> 

«img class-"normal" src="/i/eg_ smile.gif" /> 


<p> 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。 一 些 文本 。</p> 


«/body» 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 


HTML DOM 参考 手册 : top 属性 


CSS vertical-align 属性 


实例 
生 直 对 章 一 幅 图 像 


Img 


vertical-align:text-top; 


浏览 器 支持 
所 有 浏览 器 都 支持 vertical-align 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


< 、 : 
vertical-align 属性 设置 元 素 的 垂直 对 齐 方 式 。 

说 明 

该 属性 定义 行内 元 素 的 基线 相对 于 该 元 素 所 在 行 的 基线 的 垂直 对 齐 。 人 多 许 指定 负 长度 值 和 百 


分 比值 。 这 会 使 元 素 降低 而 不 是 升 高 。 在 表单 元 格 中 ， 这 个 属性 会 设置 单元 格 框 中 的 单元 格 
内 容 的 对 齐 方式 。 


默认 值 : baseline 
继承 性 : no 
版 本 : CSS1 
JavaScript 语法 : object.style.verticalAlign-"bottom" 


可 能 的 值 


值 描述 


baseline 默认 。 元 素 放置 在 父 元 素 的 基线 上 。 

sub 垂直 对 齐 文本 的 下 标 。 

super 垂直 对 齐 文 本 的 上 标 

top 把 元 素 的 顶端 与 行 中 最 高 元 素 的 项 端 对 齐 
text-top 把 元 素 的 顶端 与 父 元 素 字体 的 顶端 对 齐 
middle 把 此 元 素 放 置 在 父 元 素 的 中 部 。 

bottom 把 元 素 的 顶端 与 行 中 最 低 的 元 素 的 顶端 对 齐 。 


text-bottom 把 元 素 的 底 端 与 父 元 素 字 体 的 底 端 对 齐 。 


length 
% 使 用 "line-height" 属性 的 百分比 值 来 排列 此 元 素 。 人 允许 使 用 负 值 。 
inherit 规定 应 该 从 父 元 素 继 承 vertical-align 属性 的 值 。 


TIY 实例 


垂直 对 齐 图 象 
本 例 演示 如 何在 文本 中 垂直 排列 图 象 。 


«html» 


«head» 

«style type="text/css"> 

img.top [vertical-align:text-top) 
img.bottom [vertical-align:text-bottom) 
«/style» 

</head> 


<body> 

<p> 

这 是 一 幅 <img class="top" border="0" srcz"/i/eg cute.gif" /> 位 于 段落 中 的 图 像 。 
«/p» 

«p» 

这 是 一 幅 <ijmg class-"bottom" borderz"0" srcz"/i/eg cute.gif" /> 位 于 段落 中 的 图 像 。 
</p> 

</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 文本 


W3School CSS 参考 手册 


HTML DOM 参考 手册 : verticalAlign 属性 


CSS vertical-align 属性 363 


CSS visibility 属性 


实例 
使 h2 元 素 不 可 见 


h2 


{ 
visibility:hidden; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 visibility 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 "inherit" 和 "collapse" 属性 值 。 


ri 、 N 
visibility 属性 规定 元 素 是 否 可 见 。 


提示 : 即使 不 可 见 的 元 素 也 会 占据 页 面 上 的 空间 。 请 使 用 "display" 属性 来 创建 不 占据 页 面 空 
间 的 不 可 见 元 素 。 


说 明 


这 个 属性 指定 是 否 显示 一 个 元 素 生 成 的 元 素 框 。 这 意味 着 元 素 仍 占据 其 本 来 的 空间 ， 不 过 可 
以 完全 不 可 见 。 值 collapse 在 表 中 用 于 从 表 布 局 中 删除 列 或 行 。 


默认 值 : visible 


继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.visibilityz"hidden" 


可 能 的 值 


值 描述 
visible 默认 值 。 元 素 是 可 见 的 。 
hidden 元 素 是 不 可 见 的 。 
当 在 表格 元 素 中 使 用 时 ， 此 值 可 删除 一 行 或 一 列 ， 但 是 它 不 会 影响 表格 的 布 


colapse ”局 。 被 行 或 列 占据 的 空间 会 留 给 其 他 内 容 使 用 。 如 果 此 值 被 用 在 其 他 的 元 素 
上 ， 会 呈现 为 "hidden"。 


inherit 规定 应 该 从 父 元 素 继 承 visibility 属性 的 值 。 


TIY 实例 


如 何 使 元 素 不 可 见 
本 例 演示 如 何 使 元 素 不 可 见 。 你 希望 元 素 被 显示 出 来 ， 还 是 不 呢 ? 


«html» 

«head» 

«style type="text/css"> 
hi.visible [visibility:visible] 
hi.invisible (visibility:hidden) 
«/style» 

</head> 


<body> 

«hi class="visible"> 这 是 可 见 的 标题 </h1> 

<h1 class="invisible"> 这 是 不 可 见 的 标题 </h1> 
</body> 


«/html» 


把 表格 元 素 设 置 为 collapse 
本 例 演示 如 何 使 表格 元 素 和 下 加 ? 


«html» 
«head» 
«style type="text/css"> 
tr.coll 


visibility:collapse 


«/style» 
</head> 
<body> 


<table border="1"> 
<tr> 
<td>Adams</td> 
<td>John</td> 
</tr> 

«tr class="coll"> 
<td>Bush</td> 
<td>George</td> 
</tr> 

</table> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 定位 


HTML DOM 参考 手册 : visibility 属性 


CSS z-index 属性 


设置 图 像 的 z-index : 
img 
position:absolute; 
left:0px; 
top:Opx; 


z-index:-1; 


} 


浏览 器 支持 
所 有 主流 浏览 器 都 支持 z-index 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


ria. S 
z-index BEz ETRA F. I8 ERIESMÉSOULERBSIJUSR Uie ASTE SW BEIC 
的 前 面 。 

注释 : 元 素 可 拥有 负 的 z-index 属性 值 。 


注释 : Z-index 仅 能 在 定位 元 素 上 奏效 (例如 position:absolute;) ! 
说 明 


该 属性 设置 一 个 定位 元 素 治 z 轴 的 位 置 ，z 抽 定 义 为 垂直 延伸 到 显示 区 的 轴 。 如 果 为 正 数 ， 则 
离 用 户 更 近 ， 为 负数 则 表示 离 用 户 更 远 。 


默认 值 : auto 


继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.zIndex="1" 


可 能 的 值 


值 描述 
auto 默认 。 堆 又 顺序 与 父 元 素 相 等 。 
number 设置 元 素 的 堆 台 顺序 。 
inherit 规定 应 该 从 父 元 素 继 承 z-index 属性 的 值 。 


TIY 实例 


Z-index 


Z-index 可 用 于 将 在 一 个 元 素 放 置 于 另 一 元 素 之 后 。 


«html» 

«head» 

«style type="text/css"> 
img.x 

{ 

position:absolute; 
left:Opx; 

top:Opx; 

z-index:-1 


</style> 

</head> 

<body> 

<h1> 这 是 一 个 标题 </h1> 

«img class="x" srcz"/i/eg mouse.jpg" /> 

<p> 默 认 的 z-index 是 0, Z-index -1 拥有 更 低 的 优先 级 。</p> 
«/body» 


</html> 


Z-index 


上 例 中 的 元 素 已 经 更 改 了 Z-index。 


«html» 

«head» 

«style type="text/css"> 
img.x 

{ 

position:absolute; 
left:0px; 

top:0px; 

z-index:1 


</style> 
</head> 


<body> 

<h1> 这 是 一 个 标题 </h1> 

«img class="x" srcz"/i/eg mouse.jpg" /> 

<p> 默 认 的 z-index Æ 0, Z-index 1 拥有 更 高 的 优先 级 。</p> 
«/body» 


</html> 


相关 页 面 


CSS 教程 : CSS 定位 


HTML DOM 参考 手册 : zlndex 属性 


CSS 打印 属性 (Print) 


属性 描述 css 
orphans S a EE ISIUM M 2 
page-break-after 设置 元 素 后 的 分 页 行为 。 2 
page-break- 设置 元 素 前 的 分 页 行为。 2 
E 设置 元 素 内 部 的 分 页 行为 。 2 


idus REICUAEARATHUGATETERENSEPG 2 


o 


CSS page-break-after 属性 


例 


设置 在 表格 元 素 之 后 始终 进行 分 页 的 分 页 行为 : 


将 


«html» 

«head» 

«style» 

Qmedia print 

table [page-break-after:always;] 


</style> 
</head> 


<body> 
</body> 
</html> 


浏览 器 文 持 


所 有 浏览 器 都 支持 page-break-after 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "left"、"right" 以 及 


"inherit", 


注释 : Firefox, Chrome 以 及 Safari 7^ 3z fri E f& "avoid". "left" 以 及 "right", 


r- . N 
page-break-after 属性 设置 元 素 后 的 page-breaking 行为 。 


管 可 以 用 always 强制 放 上 分 页 符 ， 但 是 无 法 保证 避免 分 页 符 的 插入 ， 创 作 人 员 最 多 只 能 要 
户 代理 尽 可 能 避免 插入 分 页 


应 用 于 : position 值 为 relative 或 static 的 非 浮动 块 级 元 素 。 


注释 : 请 尽 可 能 少 地 使 用 分 页 属性 ， 并 且 避 免 在 表格 、 浮 动 元 素 、 带 有 边框 的 块 元 素 中 使 用 
分 页 属性 。 


默认 值 : auto 


继承 性 no 
版 本 CSS2 
JavaScript 语法 : object.style.pageBreakAfter-"always" 
Ab 
可 能 的 值 
值 苗 述 
auto 默认 。 如 果 必 要 则 在 元 素 后 插入 分 页 符 。 
always 在 元 素 后 插入 分 页 符 。 
avoid 避免 在 元 素 后 插入 分 页 符 。 
left 在 元 素 之 后 足够 的 分 页 符 ， 一 直到 一 张 空白 的 左 页 为 止 。 
right 在 元 素 之 后 足够 的 分 页 符 ， 一 直到 一 张 空 白 的 右 页 为 止 。 
inherit 规定 应 该 从 父 元 素 继 承 page-break-after 属性 的 设置 。 


相关 页 面 


HTML DOM 参考 手册 : pageBreakAfter 属性 


CSS page-break-before 属性 


例 


设置 在 表格 元 素 之 后 始终 进行 分 页 的 分 页 行为 : 


将 


«html» 

«head» 

«style» 

Qmedia print 

table [page-break-before:always;]) 


</style> 
</head> 


<body> 
</body> 
</html> 


浏览 器 文 持 


所 有 浏览 器 都 支持 page-break-before 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer. (包括 IE8) 都 不 支持 属性 值 "left"、"right" 以 及 


"inherit", 


注释 : Firefox, Chrome 以 及 Safari 7^ 3z fri E f& "avoid". "left" 以 及 "right", 


Ee s 
page-break-before 属性 设置 元 素 前 的 page-breaking 行为 。 


管 可 以 用 always 强制 放 上 分 页 符 ， 但 是 无 法 保证 避免 分 页 符 的 插入 ， 创 作 人 员 最 多 只 能 要 
户 代理 尽 可 能 避免 插入 分 页 


应 用 于 : position 值 为 relative 或 static 的 非 浮动 块 级 元 素 。 


注释 : 请 尽 可 能 少 地 使 用 分 页 属性 ， 并 且 避 免 在 表格 、 浮 动 元 素 、 带 有 边框 的 块 元 素 中 使 用 
分 页 属性 。 


JavaScript 语法 : 


可 能 的 值 


auto 


object.style.pageBreakBefore-"always' 


值 描述 
auto 默认 值 。 如 果 必 要 则 在 元 素 前 插入 分 页 符 。 
always 在 元 素 前 插入 分 页 符 。 
avoid 避免 在 元 素 前 插入 分 页 符 。 
left 在 元 素 之 前 足够 的 分 页 符 ， 一 直到 一 张 空白 的 左 页 为 止 。 
right 在 元 素 之 前 足够 的 分 页 符 ， 一 直到 一 张 空白 的 右 页 为 止 。 
inherit 规定 应 该 从 父 元 素 继 承 page-break-before 属性 的 设置 。 


相关 页 面 


HTML DOM 参考 手册 : pageBreakBefore 属性 


CSS page-break-inside 属性 


将 


设 


例 


置 在 表格 元 素 内 部 避免 进行 分 页 的 分 页 行为 : 


«html» 
«head» 
«style» 
Qmedia print 


table ([page-break-inside:avoid;] 


</style> 
</head> 


<body> 


</body> 
</html> 


z | 


览 器 支持 


只 有 Opera 浏览 器 支持 page-break-inside 属性 。 


定义 和 用 法 


page-break-inside 属性 设置 元 素 内 部 的 page-breaking 行为 。 


bis 
应 用 


注释 : 请 尽 


管 可 以 用 always 强制 放 上 分 页 符 ， 但 是 无 法 保证 避免 分 页 符 的 插入 ， 创 作 人 员 最 多 只 能 要 
户 代理 尽 可 能 避免 插入 分 页 


T : position 值 为 relative 或 static 的 非 浮 动 块 级 元 素 。 


可 能 少 地 使 用 分 页 属性 ， 并 且 避 免 在 表格 、 浮 动 元 素 、 带 有 边框 的 块 元 素 中 使 用 


分 页 属性 。 


默认 值 : auto 


继承 性 : no 
版 本 CSS2 
JavaScript 语法 : object.style.pageBreaklnside-"avoid" 


可 能 的 值 


值 描述 
auto 默认 。 如 果 必要 则 在 元 素 内 部 插入 分 页 符 。 
avoid 避免 在 元 素 内 部 插入 分 页 符 。 
inherit 规定 应 该 从 父 元 素 继 承 page-break-inside 属性 的 设置 。 


相关 页 面 


HTML DOM 参考 手册 : pageBreaklnside 属性 


CSS 表格 属性 (Table) 





属性 描述 css 
border-collapse 规定 是 否 合并 表格 边框 。 2 
border-spacing 规定 相 邻 单元 格 边 框 之 间 的 距离 。 2 
caption-side 规定 表格 标题 的 位 置 。 2 
empty-cells 规定 是 否 显示 表格 中 的 空 单元 格 上 的 边框 和 背景 。 2 
table-layout 设置 用 于 表格 的 布局 算法 。 2 


CSS border-collapse 属性 


实例 
为 表格 设置 合并 边框 模型 : 


table 


border-collapse:collapse; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 border-collapse 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


注释 : 如 果 没 有 规定 !DOCTYPE， 则 border-collapse 可 能 产生 意 想不到 的 结果 。 


定义 和 用 法 


border-collapse 属性 设置 表格 的 边框 是 否 被 合并 为 一 个 单一 的 边框 ， 还 是 象 在 标准 的 HTML 
中 那样 分 开 显示 。 


默认 值 : separate 
继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.borderCollapse-"collapse" 


可 能 的 值 


值 描述 
separate ”默认 值 。 边 框 会 被 分 开 。 不 会 忽略 border-spacing 和 empty-cells 属性 。 


如 果 可 能 ， 边 框 会 合并 为 一 个 单一 的 边框 。 会 忽略 border-spacing 和 empty- 
cells 属性 。 


inherit 规定 应 该 从 父 元 素 继 承 border-collapse 属性 的 值 。 


collapse 


TIY 实例 


合并 表格 边框 
本 例 演示 是 否 把 表格 边框 显示 为 一 条 单独 的 边框 ， 还 是 像 标准 的 HTML 中 那样 分 开 显示 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm 
«html» 

«head» 

«style type="text/css"> 

table 


border-collapse:collapse; 


} 


table, td, th 
border:1px solid black; 


</style> 
</head> 


<body> 

<table> 

<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
</tr> 

<tr> 

<td>Bill</td> 
<td>Gates</td> 
</tr> 

<tr> 
<td>Steven</td> 
<td>Jobs</td> 
</tr> 

</table> 
<p><b> 注 释 : </b> 如 果 没 有 规定 !DOCTYPE, border-collapse 属性 可 能 会 引起 意 想 不 到 的 错误 。</p> 
</body> 

</html> 
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相关 页 面 
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HTML DOM 参考 手册 : borderCollapse 属性 


CSS border-spacing 属性 


实例 
为 表格 设置 border-spacing : 


table 


border-collapse:separate; 
border-spacing:10px 50px; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 border-spacing 属性 。 


注释 : 如 果 已 规定 IDOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 border- 
spacing 属性 。 

rm. ` 

border-spacing 属性 设置 相 邻 单元 格 的 边框 间 的 距离 ( 仅 用 于 “边框 分 离 " 模 式 ) 。 

注释 : 某 些 版 本 的 IE 浏览 器 不 支持 此 属性 。 


说 明 


该 属性 指定 分 隔 边 框 模 型 中 单元 格 边 界 之 间 的 距离 。 在 指定 的 两 个 长 度 值 中 ， 第 一 个 是 水 平 
间隔 ， 第 二 个 是 垂直 间隔 。 除 非 border-collapse 被 设置 为 separate， 否 则 将 忽略 这 个 属性 。 
这 个 属性 只 应 用 于 表 ， 不 过 它 可 以 由 表 中 的 所 有 元 素 继 承 。 


默认 值 : not specified 


继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.borderSpacing="15px" 
Abh 
可 能 的 值 
值 描述 
length length 


规定 相 邻 单元 的 边框 之 间 的 距离 。 使 用 px cem 等 单位 。 不 允许 使 用 负 值 。 
如 果 定 义 一 个 length 参数 ， 那 么 定义 的 是 水 平和 垂直 间距 。 
如 果 定 义 两 个 length 参数 ， 那 么 第 一 个 设置 水 平 间距 ， 而 第 二 个 设置 垂直 间距 。 


| | inherit | 规定 应 该 从 父 元 素 继承 border-spacing 属性 的 值 。 | 


TIY 实例 


设置 表格 边框 之 间 的 空白 
本 例 演示 如 何 设置 单元 格 边框 之 间 的 距离 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm 


«html» 

«head» 

«style type="text/css"> 
table.one 


border-collapse: separate; 
border-spacing: 10px 


table.two 


border-collapse: separate; 
border-spacing: 10px 50px 


} 
</style> 
</head> 
<body> 


<table class="one" border="1"> 
«tr» 

«td»Adams«/td» 

«td»John«c/td» 

«/tr» 

«tr» 

«td»Bush«c/td» 

«td»Georgec/td» 

«/tr» 

«/table» 


«br /» 


«table class-"two" border="1"> 
«tr» 

«td»Carter«c/td» 
«td»Thomas«c/td» 

«/tr» 

«tr» 

«td»Gates«/td» 

«td»Billc/td» 

«/tr» 

«/table» 


<p><b> 注 释 : </b> 如 果 已 规定 !DOCTYPE, 884 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 border-spacin 


«/body» 
</html> 
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HTML DOM 参考 手册 : borderSpacing 属性 


CSS caption-side 属性 


Y 


实例 
规定 表格 标题 的 放置 方式 : 


caption 


caption-side:bottom; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 caption-side 属性 。 


注释 : 如 果 已 规定 !DOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 caption-side 
属性 。 

r- . N 

caption-side 属性 设置 表格 标题 的 位 置 。 

说 明 


该 属性 指定 了 表 标 题 相对 于 表 框 的 放置 位 置 。 表 标题 显示 为 好 像 它 是 表 之 前 (或 之 后 ) 的 一 
个 块 级 元 素 。 


默认 值 : top 
继承 性 : yes 


JavaScript 语法 : object.style.captionSide-"bottom" 


可 能 的 值 


ta 描述 
top 默认 值 。 把 表格 标题 定位 在 表格 之 上 。 
bottom 把 表格 标题 定位 在 表格 之 下 。 
inherit 规定 应 该 从 父 元 素 继承 caption-side 属性 的 值 。 


TIY 实例 


设置 表格 标题 的 位 置 


本 例 演示 如 何 定位 表格 的 标题 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm 


«html» 

«head» 

«style type="text/css"> 
caption 

t 


caption-side:bottom 


} 
</style> 
</head> 
<body> 


<table border="1"> 
<caption>This is a caption</caption> 
<tr> 
<td>Adams</td> 
<td>John</td> 
</tr> 

<tr> 

<td>Bush</td> 
<td>George</td> 
</tr> 

</table> 


<p><b> 注 释 : </b> 如 果 已 规定 !DOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 caption-side 


</body> 
</html> 
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HTML DOM 参考 手册 : captionSide 属性 


CSS empty-cells 属性 


实例 
隐藏 表格 中 空 单元 格 上 的 边框 和 背景 : 


table 


border-collapse:separate; 
empty-cells:hide; 
} 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 empty-cells 属性 。 


注释 : 如 果 已 规定 IDOCTYPE， 那 么 Internet Explorer 8 (以 及 更 高 版 本 ) 支持 empty-cells 
属性 。 


定义 和 用 法 

empty-cells 属性 设置 是 否 显示 表格 中 的 空 单 元 格 ( 仅 用 于 “分 离 边 框 "模式 ) 。 
注释 : 某 些 版 本 的 IE 浏览 器 不 支持 此 属性 。 

说 明 


该 属性 定义 了 不 包含 任何 内 容 的 表单 元 格 如 何 表示 。 如 果 显 示 ， 就 会 绘制 出 单元 格 的 边框 和 
背景 。 除 非 border-collapse 设置 为 separate， 否 则 将 忽略 这 个 属性 。 


JavaScript 语法 : 


show 


object.style.emptyCells-"hide" 


可 能 的 值 
值 描述 
hide 不 在 空 单元 格 周围 绘制 边框 。 
show 在 空 单元 格 周围 绘制 边框 。 默 认 。 
inherit 规定 应 该 从 父 元 素 继 承 empty-cells 属性 的 值 。 


相关 页 面 
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HTML DOM 参考 手册 : emptyCells 属性 


CSS table-layout 属性 


实例 
设置 表格 布局 算法 : 


table 


{ 
table-layout:fixed; 


浏览 器 支持 
IE Firefox Chrome Safari 


所 有 浏览 器 都 支持 table-layout 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


rr . > 
定义 和 用 法 
tableLayout 属性 用 来 显示 表格 单元 格 、 行 、 列 的 算法 规则 。 


固定 表格 布局 : 


固定 表格 布局 与 自动 表格 布局 相 比 ， 人 允许 浏览 器 更 快 地 对 表格 进行 布局 。 


Opera 


在 固定 表格 布局 中 ， 水 平 布局 仅 取 决 于 表格 宽度 、 列 宽度 、 表 格 边 框 宽度 、 单 元 格 间距 ， 


与 单元 格 的 内 容 无 关 。 


通过 使 用 固定 表格 布局 ， 用 户 代理 在 接收 到 第 一 行 后 就 可 以 显示 表格 。 


自动 表格 布局 : 


在 自动 表格 布局 中 ， 列 的 宽度 是 由 列 单元 格 中 没有 折 行 的 最 宽 的 内 容 设 定 的 。 


此 算法 有 时 会 较 慢 ， 这 是 由 于 它 需 要 在 确定 最 终 的 布局 之 前 访问 表格 中 所 有 的 内 容 。 


说 明 


该 属性 指定 了 完成 表 布 局 时 所 用 的 布局 算法 。 固 定 布局 算法 比较 快 ， 但 是 不 太 灵 活 ， 而 自动 
算法 比较 慢 ， 不 过 更 能 反映 传统 的 HTML X. 


默认 值 : auto 
继承 性 : yes 
版 本 CSS2 
JavaScript 语法 : object.style.tableLayout-"fixed" 

Ab 
可 能 的 值 
值 描述 

automatic 默认 。 列 宽度 由 单元 格 内 容 设 定 。 
fixed 列 宽 由 表格 宽度 和 列 宽度 设 定 。 
inherit 规定 应 该 从 父 元 素 继承 table-layout 属性 的 值 。 


TIY 实例 


设置 表格 的 布局 
本 例 演 示 如 何 设置 表格 的 布局 。 


«html» 

«head» 

«style type="text/css"> 
table.one 


table-layout: automatic 
table.two 
table-layout: fixed 


«/style» 
</head> 
<body> 


<table class="one" border="1" width="100%"> 

«tr» 

«td width-z"2096"21000000000000000000000000000«/td» 
«td widthz"4095?"210000000«/td» 

«td widthz"409?"2100«/td» 

«/tr» 

«/table» 


«br /» 


«table class-"two" borderz"1" width="100%"> 

«tr» 

«td widthz"2096"»1000000000000000000000000000«/td» 
«td widthz"4096?"210000000«/td» 

«td widthz"409?"2100«/td» 

«/tr» 

«/table» 


«/body» 
</html> 
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HTML DOM 参考 手册 : tableLayout 属性 


CSS 文本 属性 (Text) 





属性 描述 css 
color 设置 文本 的 颜色 。 1 
direction 规定 文本 的 方向 / 书写 方向 。 2 
letter-spacing 设置 字符 间距 。 1 
line-height 设置 行 高 。 1 
text-align 规定 文本 的 水 平 对 齐 方式 。 1 
text-decoration 规定 添加 到 文本 的 装饰 效果 。 1 
text-indent 规定 文本 块 首 行 的 缩 进 。 1 
text-shadow 规定 添加 到 文本 的 阴影 效果 。 2 
text-transform 控制 文本 的 大 小 写 。 1 
unicode-bidi 设置 文本 方向 。 2 
white-space 规定 如 何 义理 元 素 中 的 空白 。 1 
word-spacing 设置 单词 间距 。 1 
hanging-punctuation ”规定 标点 字符 是 否 位 于 线 框 之 外 。 3 
punctuation-trim 规定 是 否 对 标点 字符 进行 修剪 。 3 
text-align-last 设置 如 何 对 齐 最 后 一 行 或 紧 挨 着 强制 换行 符 之 前 的 行 。 3 
text-emphasis 向 元 素 的 文本 应 用 重点 标记 以 及 重点 标记 的 前 景色 。 3 
text-justify 规定 当 text-align 设置 为 "justify" 时 所 使 用 的 对 齐 方 法 。 3 
text-outline 规定 文本 的 轮廓 。 3 
text-overflow 规定 当 文本 浴 出 包含 元 素 时 发 生 的 事情 。 3 
text-shadow 向 文本 添加 阴影 。 3 
text-wrap 规定 文本 的 换行 规则 。 3 
word-break 规定 非 中 日 韩文 本 的 换行 规则 。 3 
word-wrap 人 允许 对 长 的 不 可 分 割 的 单词 进行 分 割 并 换行 到 下 一 行 。 3 


CSS color 属性 


例 


为 不 同 元 素 设 置 文本 颜色 : 


将 


body 
color:red; 
hi 


t 
color :#00ff00; 


{ 
color:rgb(0,0,255); 


| EAFF 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 color 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
color 属性 规定 文本 的 颜色 。 


这 个 属性 设置 了 一 个 元 素 的 前 景色 (ft HTML 表现 中 ， 就 是 元 素 文 本 的 颜色 ) ; 光栅 图 像 不 
$$ color 影响 。 这 个 颜色 还 会 应 用 到 元 素 的 所 有 边框 ， 除 非 被 border-color 或 另外 某 个 边框 颜 
色 属 性 覆盖 。 


要 设置 一 个 元 素 的 前 景色 ， 最 容易 的 方法 是 使 用 color 属性 。 


默认 值 : not specified 


继承 性 : yes 
版 本 CSS1 
JavaScript 语法 : objectstyle.color='"#FF0000" 


提示 和 注释 
提示 : 请 使 用 合理 的 背景 颜色 和 文本 颜色 搭配 ， 这 样 可 以 提高 文本 的 可 读 性 。 


可 能 的 值 


值 描述 
color name 规定 颜色 值 为 颜色 名 称 的 颜色 (比如 red) 。 
hex number 规定 颜色 值 为 十 六 进 制 值 的 颜色 (比如 #ff0000) 。 
rgb_number 规定 颜色 值 为 rgb 代码 的 颜色 (比如 rgb(255,0,0)) o 
inherit 规定 应 该 从 父 元 素 继承 颜色 。 


TIY 实例 


设置 文本 颜色 
本 例 演示 如 何 设置 文本 的 颜色 。 


«html» 

«head» 

«style type="text/css"> 
body {color:red} 

hi {color :#00ff00} 

p.ex {color:rgb(0,0,255)} 
</style> 

</head> 


<body> 

<h1> 这 是 heading 1</h1> 

<p> 这 是 一 段 普通 的 段落 。 请 注意 ， 该 段落 的 文本 是 红色 的 。 在 body 选择 器 中 定义 了 本 页 面 中 的 默认 文本 颜色 。</p> 
«p class="ex"> 该 段落 定义 了 class="ex"。 该 段落 中 的 文本 是 蓝 色 的 。</p> 

</body> 

«/html» 


4] — (3 





相关 页 面 


CSS 教程 : CSS 文本 


HTML DOM 参考 手册 : color 属性 


CSS direction 属性 


实例 
把 文本 方向 设置 为 "从 右 向 左 ”: 


div 


direction: rtl 


浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 浏览 器 都 支持 direction 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 
定义 和 用 法 
direction 属性 规定 文本 的 方向 / 书写 方向 。 


该 属性 指定 了 块 的 基本 书写 方向 ， 以 及 针对 Unicode 双向 算法 的 戏 入 禾 盖 方 向 。 不 支持 双 
向 文本 的 用 户 代 理 可 以 忽略 这 个 属性 。 


默认 值 : Itr 
继承 性 : yes 
版 本 : CSS2 
JavaScript 语法 : object.style.direction-"rtl" 


可 能 的 值 


Itr 默认 。 文 本 方向 从 左 到 右 。 
rtl 文本 方向 从 右 到 左 。 
inherit 规定 应 该 从 父 元 素 继承 direction 属性 的 值 。 
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TIY 实例 


设置 文本 的 方向 
本 例 演示 如 何 设置 文本 的 方向 。 


«html» 

«head» 

«style type="text/css"> 
div.one 

direction: rtl 

div.two 

direction: ltr 

</style> 

</head> 


<body> 


<div class="one">Some text. Right-to-left direction.</div> 
«div class="two">Some text. Left-to-right direction .</div> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 文本 


HTML DOM 参考 手册 : direction 属性 


CSS letter-spacing 属性 


例 


设置 h1 和 h2 元 素 的 字母 间距 : 


将 


hi [letter-spacing:2px] 
h2 (letter-spacing:-3px] 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 letter-spacing 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


rr . i 
letter-spacing 属性 增加 或 减少 字符 间 的 空白 (FFA) 。 


该 属性 定义 了 在 文本 字符 框 之 间 插 和 人 多 少 空 间 。 由 于 字符 字形 通常 比 其 字符 框 要 罕 ， 指 定 长 
度 值 时 ， 会 调整 字母 之 间 通 常 的 间隔 。 因 此 ，normal 就 相当 于 值 为 0。 


注释 : 允许 使 用 负 值 ， 这 会 让 字母 之 间 挤 得 更 紧 。 


默认 值 : normal 
继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.letterSpacing="3px" 


可 能 的 值 


值 描述 


normal 默认 。 规 定 字 符 间 没有 额外 的 空间 。 
length 定义 字符 间 的 固定 空间 (人 允许 使 用 负 值 ) 。 
inherit 规定 应 该 从 父 元 素 继 承 letter-spacing 属性 的 值 。 


TIY 实例 


规定 字符 间距 (字母 间隔 ) 


本 例 演示 如 何 增 加 或 减少 字符 间距 。 


«html» 


«head» 

«style type="text/css"> 

hi [letter-spacing: -0.5emj 
h4 [letter-spacing: 20px} 
</style> 

</head> 


<body> 
<h1>This is header 1</h1> 
<h4>This is header 4</h4> 
</body> 


</html> 


相关 页 面 


CSS 教程 : CSS 文本 


HTML DOM 参考 手册 : letterSpacing 属性 


CSS line-height 属性 


实例 
设置 以 百分比 计 的 行 高 : 


p.small {line-height:90%} 
p.big {line-height:200%} 


(可 以 在 页 面 底部 查看 更 多 实例 ) 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 line-height 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 

line-height 属性 设置 行 间 的 距离 〈 行 高 ) 。 

注释 : 不 允许 使 用 负 值 。 

说 明 

该 属性 会 影响 行 框 的 布局 。 在 应 用 到 一 个 块 级 元 素 时 ， 它 定义 了 该 元 素 中 基线 之 间 的 最 小 距 
离 而 不 是 最 大 距离 。 


line-height 与 font-size 的 计算 值 之 差 (在 CSS 中 成 为 “ 行 间距 ”) 分 为 两 半 ， 分 别 加 到 一 个 文 
本 行内 容 的 顶部 和 底部 。 可 以 包含 这 些 内 容 的 最 小 框 就 是 行 框 。 


原始 数字 值 指定 了 一 个 缩放 因子 ， 后 代 元 素 会 继承 这 个 缩放 因子 而 不 是 计算 值 。 


默认 值 : normal 


继承 性 : yes 
版 本 CSS1 
JavaScript 语法 : object.style.lineHeight-"2" 


可 能 的 值 


值 描述 
normal 默认 。 设 置 合理 的 行 间 距 。 
number 设置 数字 ， 此 数字 会 与 当前 的 字体 尺寸 相 乘 来 设置 行 间距 。 
length 设置 固定 的 行 间距。 
% 基于 当前 字体 尺寸 的 百分比 行 间距 。 
inherit 规定 应 该 从 父 元 素 继承 line-height 属性 的 值 。 


TIY 实例 


使 用 百分比 设置 行 间 距 
本 例 演示 如 何 使 用 百分比 值 来 设置 段落 中 的 行 间距 。 


«html» 


«head» 

«style type="text/css"> 
p.small (line-height: 90%} 
p.big (line-height: 200%} 
«/style» 

</head> 


<body> 


<p> 

这 是 拥有 标准 行 高 的 段落 。 

在 大 多 数 浏 览 器 中 默认 行 高 大 约 是 11096 到 120%, 
这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

</p> 


<p class="small"> 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
</p> 


<p class="big"> 

这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
</p> 


</body> 
</html> 


使 用 像素 值 设置 行 间距 
本 例 演示 如 何 使 用 像素 值 来 设置 段落 中 的 行 间距 。 


«html» 


«head» 
«style type="text/css"> 
p.small 


line-height: 10px 
} 
p.big 


line-height: 30px 


«/style» 
</head> 


<body> 


<p> 

这 是 拥有 标准 行 高 的 段落 。 

在 大 多 数 浏 览 器 中 默认 行 高 大 约 是 20px。 
这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

这 是 拥有 标准 行 高 的 段落 。 

</p> 


«p class="small"> 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
</p> 


<p class="big"> 

这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
</p> 


</body> 
</html> 


使 用 数值 来 设置 行 间距 
本 例 演示 如 何 使 用 一 个 数值 来 设置 段落 中 的 行 间距 。 


«html» 


«head» 
«style type="text/css"> 
p.small 


line-height: 0.5 
} 
p.big 


line-height: 2 


«/style» 
«/head» 


«body» 


«p» 

这 是 拥有 标准 行 高 的 段落 。 
默认 行 高 大 约 是 1. 

这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
这 是 拥有 标准 行 高 的 段落 。 
</p> 


«p class="small"> 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
这 个 段落 拥有 更 小 的 行 高 。 
</p> 


<p class="big"> 

这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 
</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 文本 


HTML DOM 参考 手册 : lineHeight 属性 


CSS text-align 属性 


hi [text-align:centerj 
h2 {text-align:left} 
h3 {text-align:right} 


| EAFF 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 text-align 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
text-align 属性 规定 元 素 中 的 文本 的 水 平 对 齐 方式 。 


该 属性 通过 指定 行 框 与 哪个 点 对 齐 ， 从 而 设置 块 级 元 素 内 文本 的 水 平 对 齐 方式 。 通 过 人 允许 用 
户 代理 调整 行内 容 中 字母 和 字 之 间 的 间隔 ， 可 以 支持 值 justify ; 不 同 用 户 代理 可 能 会 得 到 不 同 
的 结果 。 


如 果 direction 属性 是 ltr， 则 默认 值 是 left ; WR direction 是 rtl, 


里 s. . 

默认 值 : 则 为 right。 
继承 性 : yes 
版 本 : CSS1 


JavaScript ;& 


N 
4 


object.style.textAlign-"right" 


可 能 的 值 


值 描述 


left 把 文本 排列 到 左边 。 默 认 值 : 由 浏览 器 决定 。 

right 把 文本 排列 到 右边 。 

center 把 文本 排列 到 中 间 。 

justify 实现 两 端 对 齐 文本 效果 。 

inherit 规定 应 该 从 父 元 素 继承 text-align 属性 的 值 。 
值 justify 


最 后 一 个 水 平 对 齐 属性 是 justify， 它 会 带 来 自己 的 一 些 问 题 。 


值 justify 可 以 使 文本 的 两 端 都 对 齐 。 在 两 端 对 齐 文本 中 ， 文 本 行 的 左右 两 端 都 放 在 父 元 素 的 
内 边界 上 。 然 后 ， 调 整 单词 和 字母 间 的 间隔 ， 使 各 行 的 长 度 恰 好 相等 。 您 也 许 已 经 注意 到 
了 ， 两 端 对 齐 文本 在 打印 领域 很 常见 。 不 过 在 CSS 中 ， 还 需要 多 做 些 考虑 。 


要 由 用 户 代理 (而 不 是 CSS) 来 确定 两 端 对 齐 文本 如 何 拉 伸 ， 以 填 满 父 元 素 左 右边 界 之 间 的 
空间 。 例 如 ， 有 些 浏览 器 可 能 只 在 单词 之 间 增 加 额外 的 空间 ， 而 另外 一 些 浏览 器 可 能 会 平均 

分 布 字母 间 的 人 额外 空间 (不 过 CSS 规范 特别 指出 ， 如 果 letter-spacing 属性 指定 为 一 个 长 度 

值 ，“ 用 户 代理 不 能 进一步 增加 或 减少 字符 间 的 空间 ”) 。 还 有 一 些 用 户 代理 可 能 会 减少 某 些 行 
的 空间 ， 使 文本 挤 得 更 紧密 。 所 有 这 些 做 法 都 会 影响 元 素 的 外 观 ， 甚 至 改变 其 高 度 ， 这 取决 

于 用 户 代理 的 对 齐 选 择 影响 了 多 少 文本 行 。 

CSS 也 没有 指定 应 当 如 何人 处 理 连 字符 ( 注 1) 。 大 多 数 两 端 对 齐 文 本 都 使 用 连 字符 将 长 单词 分 
开放 在 两 行 上 ， 从 而 缩小 单词 之 间 的 间隔 ， 改 善文 本 行 的 外 观 。 不 过 ， 由 于 CSS 没有 定义 连 
字符 行为 ， 用 户 代 理 不 太 可 能 自动 加 连 字 符 。 因 此 ， 在 CSS 中 ， 两 端 对 齐 文 本 看 上 去 没有 打 
印 出 来 好 看 ， 特 别 是 元 素 可 能 太 窄 ， 以 至 于 每 行 只 能 放下 几 个 单词 。 当 然 ， 使 用 窄 设计 元 素 

是 可 以 的 ， 不 过 要 当心 相应 的 缺点 。 

注 1 : CSS 中 没有 说 明 如 何人 处 理 连 字 符 ， 因 为 不 同 的 语言 有 不 同 的 连 字符 规则 。 规 范 没有 尝试 
去 调和 这 样 一 些 很 可 能 不 完备 的 规则 ， 而 是 干脆 不 提 这 个 问题 。 


TIY 实例 


本 例 演示 如 何 对 齐 文本 。 


«html» 

«head» 

«style type="text/css"> 
hi [text-align: center} 
h2 (text-align: left} 
h3 {text-align: right} 
</style> 

</head> 


<body> 
<h1> 这 是 标题 1</h1> 
<h2> 这 是 标题 2</h2> 
<h3> 这 是 标题 3</h3> 
«/body» 


</html> 


相关 页 面 


CSS 教程 : CSS 文本 


HTML DOM 参考 手册 : textAlign 属性 


CSS text-decoration 属性 


hi [text-decoration:overline) 

h2 [text-decoration:line-through) 
h3 [text-decoration:underline] 
h4 [text-decoration:blink) 


M 大 口 
浏览 器 支持 

IE Firefox Chrome Safari Opera 
所 有 主流 浏览 器 都 支持 text-decoration 属性 。 


注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


注释 : IE、Chrome 或 Safari 不 支持 "blink" 属性 值 。 


me. : 
text-decoration 属性 规定 添加 到 文本 的 修饰 。 
注释 : 修饰 的 颜色 由 "color" 属性 设置 。 

说 明 


这 个 属性 允许 对 文本 设置 某 种 效果 ， 如 加 下 划 线 。 如 果 后 代 元 素 没 有 自己 的 装饰 ， 祖 先 元 素 
上 设置 的 装饰 会 “延伸 "到 后 代 元 素 中 。 不 要 求 用 户 代理 支持 blink, 


默认 值 : none 


继承 性 : no 
版 本 CSS1 
JavaScript 语法 : object.style.textDecoration-"overline" 


可 能 的 值 


值 描述 
none 默认 。 定 义 标 准 的 文本 。 
underline 定义 文本 下 的 一 条 线 。 
overline 定义 文本 上 的 一 条 线 。 
line-through 定义 穿 过 文本 下 的 一 条 线 。 
blink 定义 闪烁 的 文本 。 
inherit 规定 应 该 从 父 元 素 继承 text-decoration 属性 的 值 。 


TIY 实例 


修饰 文本 
本 例 演示 如 何 向 文本 添加 修饰 。 


«html» 

«head» 

«style type="text/css"> 

hi (text-decoration: overline} 

h2 (text-decoration: line-through} 
h3 (text-decoration: underline} 

h4 {text-decoration:blink} 

a {text-decoration: none} 

</style> 

</head> 


<body> 

<h1> 这 是 标题 1</h1> 

<h2> 这 是 标题 2</h2> 

<h3> 这 是 标题 3</h3> 

<h4> 这 是 标题 4</h4> 

<p><a href="http://www.w3school.com.cn/index.html"> 这 是 一 个 链接 </a></p> 
</body> 


«/html» 


相关 页 面 


CSS 教程 : CSS 文本 


HTML DOM 参考 手册 : textDecoration 属性 


CSS text-indent 属性 


将 段落 的 第 一 行 缩 进 50 像素 : 


"o 


t 
text-indent:50px; 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 text-indent 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


rt. 

AE. 3L 

text-indent 属性 规定 文本 块 中 首 行 文本 的 缩 进 。 

注释 : 允许 使 用 负 值 。 如 果 使 用 负 值 ， 那 么 首 行 会 被 缩 进 到 左边 。 
注意 : 在 CSS 2.1 之 前 ，text-indent 总 是 继承 计算 值 ， 而 不 是 声明 值 。 
说 明 


a 这 最 常用 于 建立 一 个 “标签 页 "效果 。 人 允许 指定 负 
值 ， 这 会 产生 一 种 “悬挂 缩 进 ? 的 效果 。 


JavaScript 语法 : 


可 能 的 值 


值 
length 定 
% E3 
inherit 规定 应 该 从 父 


TIY 实例 


缩 进 文 本 


本 例 演示 如 何 缩 进 文本 首 行 。 


«html» 
«head» 


«style type="text/css"> 
p (text-indent: 1cmj 


«/style» 
</head> 


<body> 

<p> 

这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
这 是 段落 中 的 一 些 文本 。 
</p> 

</body> 


</html> 


not specified 


object.style.textIndent="50px" 


描述 


素 继 承 text-indent 属性 的 值 。 


相关 页 面 


CSS 教程 : CSS 文本 


HTML DOM 参考 手册 : textlndent 属性 


CSS text-transform 属性 


例 


转换 不 同 元 素 中 的 文本 : 


将 


hi [text-transform:uppercase) 
h2 [text-transform:capitalize] 
p (text-transform:lowercase] 


浏览 器 支持 
IE Firefox Chrome Safari 


所 有 浏览 器 都 支持 text-transform 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 
text-transform 属性 控制 文本 的 大 小 写 。 


说 明 


Opera 


这 个 属性 会 改变 元 素 中 的 字母 大 小 写 ， 而 不 论 源 文档 中 文本 的 大 小 写 。 如 果 值 为 capitalize， 
则 要 对 某 些 字母 大 写 ， 但 是 并 没有 明确 定义 如 何 确定 哪些 字母 要 大 写 ， 这 取决 于 用 户 代理 如 


何 识 别 出 各 个 “ 词 ”。 


默认 值 : none 
继承 性 : yes 


JavaScript 语法 : object.style.textTransform-"uppercase" 


提示 和 注释 
注释 : 不 同 的 用 户 代理 可 能 会 用 不 同 的 方法 来 确定 单词 从 哪里 开始 ， 相 应 地 确定 哪些 字母 要 


大 写 。 例 如 ， 文 本 "w3-school" 可 以 用 两 种 方式 显示 : "W3-school" 和 "W3-School", CSS 并 
没有 规定 哪 一 种 是 正确 的 ， 所 以 这 两 种 都 是 可 以 的 。 


可 能 的 值 


值 描述 
none 默认 。 定 义 带 有 小 写字 母 和 大 写字 母 的 标准 的 文本 。 
capitalize 文本 中 的 每 个 单词 以 大 写字 母 开 头 。 
uppercase 定义 仅 有 大 写字 母 。 
lowercase 定义 无 大 写字 母 ， 仅 有 小 写字 母 。 
inherit 规定 应 该 从 父 元 素 继承 text-transform 属性 的 值 。 


TIY 实例 


控制 文本 中 的 字母 
本 例 演示 如 何 控制 文本 中 的 字母 的 大 小 写 。 


«html» 


«head» 
«style type="text/css"> 
hi [text-transform: uppercase} 
p.uppercase {text-transform: uppercase} 
p.lowercase {text-transform: lowercase} 
p.capitalize {text-transform: capitalize} 
</style> 
</head> 
<body> 
<h1>This Is An H1 Element</h1> 
<p class="uppercase">This is some text in a paragraph.</p> 
«p class-"lowercase"»This is some text in a paragraph .</p> 
«p class-"capitalize"»This is some text in a paragraph.«/p-» 
«/body» 


</html> 


相关 页 面 


CSS 教程 : CSS 文本 


HTML DOM 参考 手册 : textTransform 属性 


W3School CSS 参考 手册 


CSS text-transform 属性 414 


CSS unicode-bidi 属性 


za. 
4E. 3L 
unicode-bidi 属性 设置 文本 的 方向 。 
继承 性 : Yes 
说 明 
尽管 CSS 试图 义理 书写 方向 ， 但 Unicode 有 一 种 更 健壮 的 方式 来 义理 方向 性 。 利 用 属性 
unicode-bidi, CSS 创作 人 员 可 以 充分 利用 Unicode 的 某 些 功能 。 
LA 
可 能 的 值 
在 这 里 ， 我 们 将 简要 引用 CSS2.1 规范 中 关于 这 些 值 的 描述 ， 这 些 描 述 很 好 地 说 明了 各 个 值 
的 实现 。 
normal 
元 素 不 会 对 双向 算法 打开 附加 的 一 层 伐 套 。 对 于 行内 元 素 ， 顺 序 的 隐 式 重 排 会 跨 元 素 边 界 进 
行 。 
embed 


如 果 是 一 个 行内 元 素 ， 这 个 值 对 于 双向 算法 会 打开 附件 的 一 层 财 套 。 这 个 姥 套 层 的 方向 由 
direction 属性 指定 。 会 在 元 素 内 部 隐 式 地 完成 顺序 重 排 。 这 对 应 于 在 元 素 开始 处 增加 一 个 
LRE (对 于 direction:ltr : U+202A) 或 RLE (对 于 direction:rtl : U+202B) ， 并 在 元 素 的 最 
后 增加 一 个 PDF (U+202C) 。 


bidi-override 


这 会 为 行内 元 素 创 建 一 个 覆盖 。 对 于 块 级 元 素 ， 将 为 不 在 另 一 块 中 的 行内 后 代 创建 一 个 覆 
盖 。 这 说 明 ， 顺 序 重 排 在 元 素 内 部 严格 按照 direction 属性 进行 ; 忽略 了 双向 算法 的 隐 式 部 
分 。 这 对 应 于 在 元 素 开 始 处 增加 一 个 LRO (对 于 direction:ltr : U+202D) 或 RLO (对 于 
direction:rtl : U+202E) ， 并 在 元 素 最 后 增加 一 个 PDF (U*202C) 。 


CSS white-space 属性 


实例 
规定 段落 中 的 文本 不 进行 换行 : 


p 


white-space: nowrap 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 white-space 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


定义 和 用 法 


white-space 属性 设置 如 何 处 理 元 素 内 的 空白 。 


这 个 属性 声明 建立 布局 过 程 中 如 何 义理 元 素 中 的 空白 符 。 值 pre-wrap 和 pre-line 是 CSS 2.1 
中 新 增 的 。 


默认 值 : normal 
继承 性 : yes 
版 本 : CSS1 
JavaScript 语法 : object.style.whiteSpace-"pre" 


可 能 的 值 


值 描述 


normal 默认 。 空 白 会 被 浏览 器 忽略 。 
pre 空白 会 被 浏览 器 保留 。 其 行为 方式 类 似 HTML 中 的 «pre» 标签 。 


nowrap 文本 不 会 换行 ， 文 本 会 在 在 同一 行 上 继续 ， 直 到 遇 到 «br 标签 为 止 。 
pre-wrap 保留 空白 符 序 列 ， 但 是 正常 地 进行 换行 。 

pre-line 合并 空白 符 序 列 ， 但 是 保留 换行 符 。 

inherit 规定 应 该 从 父 元 素 继承 white-space 属性 的 值 。 


TIY 实例 


在 元 素 中 禁止 文本 折 行 
本 例 演示 如 何 禁 止 在 元 素 中 的 文本 折 行 。 


«html» 

«head» 

«style type="text/css"> 
p 


white-space: nowrap 
} 

</style> 

</head> 

<body> 


^ 
* c 


Ao Ao Aa TD TD TD D D SD SD D V 


一 些 文本 。 
些 文本 。 
些 文本 。 
些 文本 。 
些 文本 。 
些 文本 。 
些 文本 。 
些 文本 。 
些 文本 。 
些 文本 。 
些 文本 。 
这 是 一 些 文本 。 


Da E pe ba E Se p S e a 


^ 

iS 
"Oo 

V 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 文本 


HTML DOM 参考 手册 : whiteSpace 属性 


CSS word-spacing 属性 
例 


规定 段落 中 的 字 间 距 是 25 像素 : 


将 


"o 


word-spacing:25px; 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 浏览 器 都 支持 word-spacing 属性 。 
注释 : 任何 的 版 本 的 Internet Explorer (包括 IE8) 都 不 支持 属性 值 "inherit"。 


mia. 
AE. 3L 
word-spacing 属性 增加 或 减少 单词 间 的 空白 〈 即 字 间 陋 ) 。 
该 属性 定义 元 素 中 字 之 间 插 入 多 少 空 白 符 。 针 对 这 个 属性 ," 字 ”定义 为 由 空白 符 包围 的 一 个 
字符 串 。 如 果 指 定 为 长 度 值 ， 会 调整 字 之 间 的 通常 间隔 ; 所 以 ，normal 就 等 同 于 设置 为 0。 
人 允许 指定 负 长 度 值 ， 这 会 让 字 之 间 挤 得 更 紧 。 
注释 : 允许 使 用 负 值 。 
默认 值 : normal 


继承 性 : yes 


JavaScript 语法 : object.style.wordSpacing7" 10px' 


提示 和 注释 


注释 : CSS 把 “ 字 (word)“" 定 义 为 任何 非 空白 符 字符 组 成 的 串 ， 并 由 某 种 空白 字符 包围 。 这 
个 定义 没有 实际 的 语义 ， 它 只 是 假设 一 个 文档 包含 由 一 个 或 多 个 空白 字符 包围 的 字 。 支 持 
CSS 的 用 户 代理 不 一 定 能 确定 一 个 给 定语 言 中 哪些 是 合法 的 字 ， 而 哪些 不 是 。 尽 管 这 个 定义 
没有 多 大 价值 ， 不 过 它 意味 着 采用 象形 文字 的 语言 或 非 罗马 书写 体 往往 无 法 指定 字 间 隔 。 


提示 : 利用 这 个 属性 ， 可 能 会 创建 字 间 隔 太 宽 的 文档 ， 所 以 ， 使 用 word-spacing 时 要 小 心 。 


可 能 的 值 


值 描述 
normal 默认 。 定 义 单词 间 的 标准 空间 。 
length 定义 单词 间 的 固定 空间 。 
inherit 规定 应 该 从 父 元 素 继 承 word-spacing 属性 的 值 。 


TIY 实例 


增加 或 减少 单词 间距 ( 字 间 隔 ) 
本 例 演 示 如 何 增加 段落 中 单词 间 的 距离 。 


«html» 

«head» 

«style type="text/css"> 
p.spread (word-spacing: 30px;j 
p.tight (word-spacing: -0.5em;j 
«/style» 

</head> 


<body> 
<p class="spread">This is some text. This is some text.</p> 
<p class="tight">This is some text. This is some text.</p> 


</body> 
</html> 


相关 页 面 


CSS 教程 : CSS 文本 


HTML DOM 参考 手册 : wordSpacing 属性 


CSS3 hanging-punctuation 属性 


实例 
在 p 元 素 首 行 的 开始 边缘 之 外 放置 一 个 标点 符号 : 


p 
t 


hanging-punctuation:first; 


S - nn 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
目前 主流 浏览 器 都 不 支持 hanging-punctuation 属性 。 
Lr. N 


hanging-punctuation 属性 规定 把 标点 符号 放 在 文本 整 行 的 开头 还 是 结尾 的 行 框 之 外 。 


默认 值 : none 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.hangingPunctuation-"first" 


语法 


hanging-punctuation: none|first|last|allow-end|force-end; 


值 
none 
first 
last 
allow-end 


force-end 


描述 
不 在 文本 整 行 的 开头 还 是 结尾 的 行 框 之 外 放置 标签 符号 。 
标点 附着 在 首 行 开始 边 缘 之 外 。 
标点 附着 在 首 行 结尾 边缘 之 外 。 


CSS3 punctuation-trim 属性 


实例 
修剪 p 元 素 中 每 行 开头 的 开启 标点 : 


p 
t 


punctuation-trim:start; 


} 


浏览 器 支持 
目前 | 览 器 都 不 支持 punctuation-trim 属性 。 
定义 和 用 法 


punctuation-trim 属性 规定 如 果 标 点 位 于 行 开头 或 结尾 处 ， 或 者 临近 另 一 个 全 角 标 点 符号 ， 是 
否 对 标点 符号 进 jt 17112 83, 


默认 值 : none 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.punctuationTrim-"start" 


吾 法 


punctuation-trim: none|start|end|allow-end|adjacent; 


值 描述 


none 不 修剪 开启 或 闭合 标点 符号 。 
start 修 瘟 每 行 结尾 的 开 雇 标点 符号 。 
end 修剪 每 行 结尾 的 闭合 标点 符号 。 
allow-end 


adjacent 


CSS3 text-emphasis 属性 


浏览 器 支持 


目前 主流 浏览 器 都 不 支持 text-emphasis 属性 。 


人、 i 
text-emphasis 属性 是 简写 属性 ， 用 于 在 一 个 声明 中 设置 text-emphasis-style 和 text- 
emphasis-color。 


提示 : Adobe 的 "Kenten Generic OpenType Font" 是 一 个 适合 重点 标记 的 字体 ， 它 专门 为 重 
点 标记 设计 。 


默认 值 : none 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.textEmphasis-"filled blue" 


语法 


text-emphasis:  text-emphasis-style | text-emphasis-color ; 


值 描述 
text-emphasis-style 向 元 素 的 文本 应 用 重点 标记 。 


text-emphasis-color 定义 重点 标记 的 前 景色 。 


CSS3 text-justify 属性 


4 


实例 


齐 行 改变 单词 间 的 间隔 : 


u 


div 

t 

text-align:justify; 
text-justify:inter-word; 


} 
浏览 器 支持 
IE Firefox Chrome Safari Opera 
只 有 Internet Explorer 支持 text-justify 属性 。 
rm . 3 


text-justify 属性 规定 当 text-align 被 设置 为 text-align 时 的 齐 行 方法 。 


该 属性 规定 如 何 对 齐 行文 本 进行 对 齐 和 分 隔 。 


默认 值 : auto 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.textJustify-"inter-word" 


语法 


text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim; 


值 
auto 
none 
inter-word 


inter-ideograph 
inter-cluster 
distribute 


kashida 


text-justifv 


浏览 器 决定 齐 行 算法 。 

禁用 齐 行 。 

增加 /减少 单词 间 的 间隔 。 

用 表意 文本 来 排 齐 内 容 。 

只 对 不 包含 内 部 单词 间隔 的 内 容 〈 比 如 亚洲 语系 ) 进行 排 齐 。 
类 似 报纸 版 面 ， 除 了 在 东亚 语系 中 最 后 一 行 是 不 齐 行 的 。 
通过 拉 伸 字符 来 排 齐 内 容 。 


测试 








1J iX 
1J iX 
1J iX 
1] iX 
1J iX 
| 试 
1J iX 


N 


CSS3 text-outline 属性 


44 


实例 


设置 text-outline : 


p.test 


t 
text-outline: 2px 2px Zff0000; 
H 


浏览 器 文 持 
所 有 主流 浏览 器 都 不 支持 text-outline 属性 。 


定义 和 用 法 


text-outline 属性 规定 文本 轮廓 。 


默认 值 : none 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.textOutline="2px 2px #ff0000" 


语法 


text-outline: thickness blur color ; 





值 描述 
thickness 必需 。 轮 廓 的 粗细 。 
blur 可 选 。 轮 廓 的 模糊 半径 。 
ge 


color 必需 。 轮 廓 的 颜色 。 参 阅 CSS 颜色 值 。 


W3School CSS 参考 手册 


CSS3 text-outline 属性 428 


CSS3 text-overflow 属性 


实例 
使 用 text-overflow 属性 : 


div.test 


text-overflow:ellipsis; 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 


IE Firefox Chrome Safari 
所 有 主流 浏览 器 都 支持 text-overflow 属性 。 
= . ` 
text-overflow 属性 规定 当 文 本 浴 出 包含 元 素 时 发 生 的 事情 。 
默认 值 : clip 

继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.textOverflow-"ellipsis" 


语法 


text-overflow: clip|ellipsis| string ; 


Opera 


~ 
-rr 


值 描述 测试 


clip 修剪 文本 。 测试 
ellipsis 显示 省 略 符号 来 代表 被 修剪 的 文本 。 测试 
string 使 用 给 定 的 字符 串 来 代表 被 修剪 的 文本 。 


X BER 实例 


带 有 hover 效果 的 Text-overflow 


本 例 演示 当 光 标 浮动 到 元 素 上 时 如 何 显示 全 部 文本 。 


<!DOCTYPE html» 
«html» 

«head» 

«style» 
div.test 


{ 

white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000; 


} 


div.test:hover 


{ 


text-overflow:inherit; 
overflow:visible; 


d ees 

</head> 

<body> 

<p> 如 果 您 把 光标 移动 到 下 面 两 个 div 上 ， 就 能 够 看 到 全 部 文本 。</p> 

<p> 这 个 div 使 用 "text-overflow:ellipsis" : </p> 

«div class="test" style="text-overflow:ellipsis;">This is some long text that will not fi 
«p»ix div 使 用 "text-overflow:clip" : </p> 

«div class-"test" style-"text-overflow:clip;"»This is some long text that will not fit in 


«/body» 
</html> 


EE 


相关 页 面 


CSS3 教程 : CSS3 文本 效果 





CSS3 text-shadow 属性 


实例 
基础 的 文本 阴影 效果 : 
hi 


{ 
text-shadow: 5px 5px 5px #FF0000; 


页 面 底部 有 更 多 实例 。 
M 大 口 
浏览 器 支持 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 text-shadow 属性 。 
注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 text-shadow 属性 。 


定义 和 用 法 


text-shadow 属性 向 文本 设置 阴影 。 


默认 值 : none 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.textShadow-"2px 2px #ff0000" 


语法 


text-shadow: h-shadow _v-shadow. blur color ; 





注释 : text-shadow 属性 向 文本 添加 一 个 或 多 个 阴影 。 该 属性 是 喜 号 分 隔 的 阴影 列表 ， 每 个 阴 
影 有 两 个 或 三 个 长 度 值 和 一 个 可 选 的 颜色 值 进 行规 定 。 省 略 的 长 度 是 0。 











值 描述 测试 
h-shadow 必需 。 水 平 阴 影 的 位 置 。 人 允许 负 值 。 测试 
v-shadow 必需 。 垂 直 阴 影 的 位 置 。 人 允许 负 值 。 测试 
blur 可 选 。 模 糊 的 距离 。 测试 
color 可 选 。 阴 影 的 颜色 。 参 阅 CSS 颜色 值 。 测试 


X BER 实例 


带 有 模糊 效果 的 文本 阴影 
该 例 演示 带 有 模糊 效果 的 文本 阴影 。 


<!DOCTYPE html» 

«html» 

«head» 

«style» 

hi (text-shadow:2px 2px 8px £FF0000;]j 
«/style» 

</head> 

<body> 


<h1> 模 糊 效果 的 文本 阴影 ! </h1> 


«/body» 
</html> 
白色 文本 上 的 阴影 


本 例 演示 白色 文本 上 的 文本 阴影 。 


<!DOCTYPE html» 
«html» 

«head» 

«style» 

hi ( 
color:white; 
text-shadow:2px 2px 4px #000000; 
} 

</style> 
</head> 

<body> 


<h1> 白 色 文本 的 阴影 效果 ! </h1> 


«/body» 
</html> 


需 虹 灯 效 果 的 文本 阴影 


本 例 演示 带 有 震 虹 灯 效 果 的 文本 阴影 。 


«IDOCTYPE html» 


text-shadow:0 © 3px #FF0000; 
} 

</style> 

</head> 

<body> 

<h1> 需 虹 灯 效果 的 文本 阴影 ! </h1> 


«/body» 
</html> 


相关 页 面 


CSS3 教程 : CSS3 文本 效果 


CSS3 text-wrap 属性 


实例 


不 允许 换行 : 


p.test [text-wrap:none;) 


浏览 器 文 持 


目前 | 览 器 都 不 支持 text-wrap 属性 。 


定义 和 用 法 


text-wrap 属性 规定 文本 的 换行 ( 折 行 ) 规则 。 


默认 值 : normal 


继承 性 : 


JavaScript 语法 : 


吾 法 


object.style.textWrap-"none" 


text-wrap: normal|none|unrestricted|suppress; 


值 
normal 
none 
unrestricted 


suppress 


描述 
只 在 允许 的 换行 点 进行 换行 。 
不 换行 。 元 素 无 法 容纳 的 文本 会 洽 出 。 
在 任意 两 个 字符 间 换 行 。 


压缩 元 素 中 的 换行 。 浏 览 器 只 在 行 中 没有 其 他 有 效 换行 


点 时 进行 换行 。 


CSS3 word-break 属性 


> 
实例 
在 恰当 的 断 字 点 进行 换行 : 

p.test (word-break:hyphenate; 
m - ng 
浏览 器 支持 

IE Firefox Chrome 

所 有 主流 浏览 器 都 支持 word-break 属性 。 
Lr. 3 
定义 和 用 法 


word-break 属性 规定 自动 换行 的 处 理 方法 。 


提示 : 通过 使 用 word-break 属性 ， 可 以 让 浏览 器 


默认 值 : normal 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.wordBreak-"keep-all" 


语法 


word-break: normal|break-all|keep-all; 


Safari 


现在 任意 位 置 的 换行 。 


Opera 


值 描述 
normal 使 用 浏览 器 默认 的 换行 规则 。 
break-all 允许 在 单词 内 换行 。 
keep-all 只 能 在 半角 空格 或 连 字 符 处 换行 。 


CSS3 word-wrap 属性 


"p? 
实例 
允许 长 单词 换行 到 下 一 行 : 
p.test {word-wrap:break-word;} 
M yu [m | 
2) E EE 
IE Firefox Chrome Safari Opera 


所 有 主流 浏览 器 都 支持 word-wrap 属性 。 


定义 和 用 法 


word-wrap 属性 允许 长 单词 或 URL 地 址 换行 到 下 一 行 。 


默认 值 : normal 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.wordWrap="break-word" 


` 法 
Àj 
word-wrap: normal|break-word; 


值 描述 
normal 只 在 允许 的 断 字 点 换行 (浏览 器 保持 默认 人 处理 ) 。 
break-word 在 长 单词 或 URL 地 址 内 部 进行 换行 。 


2D/3D 转换 属性 (Transform) 


属性 
transform 
transform-origin 
transform-style 
perspective 
perspective-origin 


backface-visibility 


描述 
向 元 素 应 用 2D 或 3D 转换 。 
允许 你 改变 被 转换 元 素 的 位 置 。 
规定 被 伐 套 元 素 如 何在 3D 空间 中 显示 。 
规定 3D 元 素 的 透视 效果 。 
规定 3D 元 素 的 底部 位 置 。 
定义 元 素 在 不 面 对 屏 幕 时 是 否 可 见 。 


CSS 


C CO CQ CQ C wm 


CSS3 transform 属性 


实例 
旋转 div 元 素 : 


div 
{ 


transform:rotate(7deg); 

-ms-transform:rotate(7deg); VRTETI 
-moz-transform:rotate(7deg); /* Firefox */ 
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */ 
-o-transform:rotate(7deg); /* Opera */ 


} 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox, Opera 支持 transform 属性 。 
Internet Explorer 9 支持 替代 的 -ms-transform 属性 (EAF 2D 转换 ) 。 
Safari 和 Chrome 支持 替代 的 -webkit-transform 属性 (3D 和 2D 转换 ) 。 


Opera 只 支持 2D 转换 。 


定义 和 用 法 


transform 属性 向 元 素 应 用 2D 或 3D 转换 。 该 属性 允许 我 们 对 元 素 进 行 旋 转 、 缩 放 、 移 动 或 
倾斜 。 


为 了 更 好 地 理解 transform 属性 ， 请 查看 这 个 演示 。 


默认 值 none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.transform-"rotate(7 deg)" 
语法 
transform: none| transform-functions ; 
fü 描述 
none 定义 不 进行 转换 。 


matrix(n,n,n,n,n,n) 


matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 


translate(x,y) 
translate3d(x,y,z) 


translateX(x) 


translateY(y) 
translateZ(z) 
scale(x,y) 
scale3d(x,y,z) 


scaleX(x) 


scaleY(y) 


定义 2D 转换 ， 使 用 六 个 值 的 和 矩阵 。 


定义 3D 转换 ， 使 用 16 个 值 的 4x4 
和 矩阵 。 


定义 2D 转换 。 
定义 3D 转换 。 


定义 转换 ， 只 是 用 X 轴 的 值 。 


定义 转换 ， 只 是 用 Y 轴 的 值 。 
定义 3D 转换 ， 只 是 用 Z 轴 的 值 。 
定义 2D 缩放 转换 。 

定义 3D 缩放 转换 。 


通过 设置 X 轴 的 值 来 定义 缩放 转换 。 


通过 设置 Y 轴 的 值 来 定义 缩放 转换 。 


通过 设置 Z 轴 的 值 来 定义 3D 缩放 转 


rotate(angle) 
rotate3d(x,y,z,angle) 


rotateX(angle) 

rotateY (angle) 
rotateZ(angle) 
skew(x-angle, y-angle) 
skewX(angle) 

skewY (angle) 


perspective(n) 


亲自 试 一 试 - 实例 
扔 到 桌子 上 面 的 图 片 
本 例 演示 如 何 创建 宝 坝 来 "图 片 ， 并 旋转 图 片 。 


换 。 
定义 2D 旋转 ， 在 参数 中 规定 角度 。 
定义 3D 旋转 。 


定义 治 着 X 轴 的 3D 旋转 。 


定义 治 着 Y 轴 的 3D 旋转 。 


定义 治 着 Z 轴 的 3D 旋转 。 


定义 治 着 X 和 YY 轴 的 2D 倾斜 转换 。 


定义 治 着 X 轴 的 2D 倾斜 转换 。 


定义 治 着 Y 轴 的 2D 倾斜 转换 。 


为 3D 转换 元 素 定义 透视 视图 。 








<!DOCTYPE html» 

«html» 

«head» 

«style» 

body 

i rl 

margin:30px; 
background-color :#E9E9E9; 
} 


div.polaroid 


{ 

width:294px; 

padding:10px 10px 20px 10px; 
border:1px solid £BFBFBF; 
background-color:white; 

/* Add box-shadow */ 
box-shadow:2px 2px 3px £aaaaaa; 


} 


div.rotate_left 


{ 

float:left; 

-ms-transform:rotate(7deg); /* IE 9 */ 
-moz-transform:rotate(7deg); /* Firefox */ 
-webkit-transform:rotate(7deg); /* Safari and Chrome */ 
-o-transform:rotate(7deg); /* Opera */ 
transform:rotate(7deg); 


} 


div.rotate_right 


{ 

float:left; 

-ms-transform:rotate(-8deg); /* IE 9 */ 
-moz-transform:rotate(-8deg); /* Firefox */ 
-webkit-transform:rotate(-8deg); /* Safari and Chrome */ 
-o-transform:rotate(-8deg); /* Opera */ 
transform:rotate(-8deg); 


} 
</style> 
</head> 
<body> 


<div class="polaroid rotate left"> 

«img srcz"/i/ballade dream.jpg" alt=" 郁 金 香 " width="284" height="213" /> 
«p class="caption"> 上 海鲜 花 港 的 郁金香 ， 花 名 : Ballade Dream, </p> 

</div> 


«div class-"polaroid rotate right"> 

«img src-"/i/china pavilion.jpg" alt=" 世 博 中 国 馆 " width="284" height-"213" /> 
«p class="caption'">2010 年 上 海 世博 会 ， 中 国 馆 。</p> 

«/div» 


«/body» 
</html> 


相关 页 面 


CSS3 教程 : CSS3 2D 转换 


CSS3 教程 : CSS3 3D 转换 


CSS3 transform-origin 属性 


4 


实例 


设置 旋转 元 素 的 基点 位 置 : 


4 


div 
t 
transform: rotate(45deg); 
transform-origin:2096 4096; 
-ms-transform: rotate(45deg); 7 TETOR 
-ms-transform-origin:20% 40%; TEROR 
-webkit-transform: rotate(45deg); /* Safari 和 Chrome */ 
-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */ 
-moz-transform: rotate(45deg); /* Firefox */ 
-moz-transform-origin:20% 40%; /* Firefox */ 
-o-transform: rotate(45deg); /* Opera */ 
-o-transform-origin:209?6 4096; /* Opera */ 
} 

页 面 底部 有 更 多 实例 。 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox; Opera 支持 transform-origin 属性 。 
Internet Explorer 9 支持 替代 的 -ms-transform-origin 属性 ( 仅 适用 于 2D 转换 ) 。 
Safari 和 Chrome 支持 替代 的 -webkit-transform-origin 属性 (3D 和 2D 转换 ) 。 


Opera 只 支持 2D 转换 。 


re. : 
transform-origin 属性 允许 您 改变 被 转换 元 素 的 位 置 。 


2D 转换 元 素 能 够 改变 元 素 x 和 y 轴 。3D 转换 元 素 还 能 改变 其 Z 轴 。 


为 了 更 好 地 理解 transform-origin 属性 ， 请 查看 这 个 演示 。 


Safari/Chrome 用 户 : 为 了 更 好 地 理解 transform-origin 属性 用 于 3D 转换 的 情况 ， 请 查看 这 


个 演示 。 
注释 : 该 属性 必须 与 transform 属性 一 同 使 用 。 


为 了 更 好 地 理解 transform 属性 ， 请 查看 这 个 演示 。 


默认 值 : 50% 50% 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.transformOrigin-"2096 4096" 


语法 


transform-origin:  x-axis y-axis Zz-axis ; 





fü 描述 


x-axis 
定义 视图 被 置 于 X 轴 的 何 处 。 可 能 的 值 : 


e left 

e center 
e right 
e length 
e 96 


| | y-axis | 
定义 视图 被 置 于 YY 轴 的 何 处 。 可 能 的 值 : 


e top 

e center 
e bottom 
e length 
e % 


| | z-axis | 


定义 视图 被 置 于 Z 轴 的 何 处 。 可 能 的 值 : 
e length 


相关 页 面 


CSS3 教程 : CSS3 2D 转换 


CSS3 教程 : CSS3 3D 转换 


CSS3 transform-style 属性 


实例 


使 被 转换 的 子 元 素 保 留 其 3D 转换 : 


div 


{ 


transform: rotateY(60deg); 
transform-style: preserve-3d; 
-webkit-transform: 


rotateY(60deg); /* Safari 和 Chrome */ 


-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */ 


} 


浏览 器 支持 


IE 


Chrome Safari 


Firefox 支持 transform-style 属性 。 


Chrome, Safari 和 Opera 支持 替代 的 -webkit-transform-style 属性 。 


定义 和 用 法 


transform-style 属性 规定 如 何在 3D 空间 中 呈现 被 从 套 的 元 素 。 


注释 : 该 属性 必须 与 transform 属性 一 同 使 用 。 


默认 值 : 


继承 性 : 


JavaScript 语法 : 


语法 


flat 


object.style.transformStyle-"preserve-3d" 


Opera 


transform-style: flat|preserve-3d; 


t 描述 
flat 子 元 素 将 不 保留 其 3D 位 置 。 


preserve-3d 子 元 素 将 保留 其 3D 位 置 。 


CSS3 perspective 属性 


实例 
设置 元 素 被 查看 位 置 的 视图 : 


div 


perspective: 500; 
-webkit-perspective: 500; /* Safari 和 Chrome */ 
} 


浏览 器 支持 
目前 浏览 器 都 不 支持 perspective 属性 。 


Chrome 和 Safari 支持 替代 的 -webkit-perspective 属性 。 


定义 和 用 法 

perspective 属性 定义 3D 元 素 距 视图 的 距离 ， 以 像素 计 。 该 属性 允许 您 改变 3D 元 素 查 看 3D 
元 素 的 视图 。 

当 为 元 素 定义 perspective 属性 时 ， 其 子 元 素 会 获得 透视 效果 ， 而 不 是 元 素 本 身 。 

注释 : perspective 属性 只 影响 3D 转换 元 素 。 


提示 : 请 与 perspective-origin 属性 一 同 使 用 该 属性 ， 这 样 您 就 能 够 改变 3D 元 素 的 底部 位 
iB. 


默认 值 : none 
继承 性 : yes 
版 本 CSS3 
JavaScript 语法 : object.style.perspective-500 


语法 


perspective: number |none; 


值 描述 
number 元 素 距 离 视 图 的 距离 ， 以 像素 计 。 


none 默认 值 。 与 0 相同 。 不 设置 透视 。 


CSS3 perspective-origin 属性 


实例 
设置 3D 元 素 的 基点 位 置 : 


div 

{ 

perspective:150; 

perspective-origin: 10% 10%; 

-webkit-perspective:150; /* Safari 和 Chrome */ 
-webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */ 
} 


T - nn 
浏览 器 支持 
目前 浏览 器 都 不 支持 perspective-origin 属性 。 


Chrome 和 Safari 支持 替代 的 -webkit-perspecitve-origin 属性 。 


c . ` 

perspective-origin 属性 定义 3D 元 素 所 基于 的 X ANI Y 轴 。 该 属性 允许 您 改变 3D 元 素 的 底 
部 位 置 。 

当 为 元 素 定 义 perspective-origin 属性 时 ， 其 子 元 素 会 获得 透视 效果 ， 而 不 是 元 素 本 身 。 


注释 : 该 属性 必须 与 perspective 属性 一 同 使 用 ， 而 且 只 影响 3D 转换 元 素 。 


默认 值 : 50% 50% 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.perspectiveOrigin="10% 1096" 


语法 


perspective-origin: _x-axis y-axis ; 





值 


X-axis 
定义 该 视图 在 x 轴 上 的 人 位置。 默认 值 : 5096, 
可 能 的 值 : 


o left 

e center 
e right 
e length 
e 06 


| | y-axis | 


定义 该 视图 在 y 轴 上 的 位 置 。 默 认 值 : 5096, 


e top 

e center 
e bottom 
e length 
e 96 


CSS3 backface-visibility 属性 


实例 


隐藏 被 旋转 的 div 元 素 的 背面 : 


div 

{ 

backface-visibility:hidden; 
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */ 
-moz-backface-visibility:hidden; /* Firefox */ 


-ms-backface-visibility:hidden; 


} 


浏览 器 支持 


IE 


Firefox 


/* Internet Explorer */ 


Chrome Safari 


只 有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性 。 


Opera 15+, Safari 和 Chrome 支持 蔡 代 的 -webkit-backface-visibility 属性 。 


定义 和 用 法 


backface-visibility 属性 定义 当 元 素 不 面向 屏幕 时 是 否 可 见 。 


如 果 在 旋转 元 素 不 希望 看 到 其 背面 时 ， 该 属性 很 有 用 。 


默认 值 : 


继承 性 : 


JavaScript 语法 : 


语法 


Visible 


object.style.backfaceVisibilityz"hidden" 


Opera 


backface-visibility: visible|hidden; 


visible 


hidden 


值 


背面 是 可 见 的 。 
ETE IE n] LBS. 


Bt 
ci 


过 渡 属 性 (Transition ) 


属性 
transition 
transition-property 
transition-duration 
transition-timing-function 


transition-delay 


描述 
简写 属性 ， 用 于 在 一 个 属性 中 设置 四 个 过 渡 属性 。 
规定 应 用 过 渡 的 CSS 属性 的 名 称 。 
定义 过 渡 效果 花费 的 时 间 。 
规定 过 渡 效 果 的 时 间 曲 线 。 


定 
规定 过 渡 效 果 何 时 开始 。 


CSS3 transition 属性 


实例 
把 鼠标 指针 放 到 div 元 素 上 ， 其 宽度 会 从 100px 逐渐 变 为 300px : 


div 


{ 

width:100px; 

transition: width 2s; 

-moz-transition: width 2s; /* Firefox 4 */ 
-webkit-transition: width 2s; /* Safari 和 Chrome */ 
-o-transition: width 2s; /* Opera */ 


} 


浏览 器 文 持 


IE Firefox Chrome Safari 


Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性 。 
Safari 支持 替代 的 -webkit-transition 属性 。 
注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 transition 属性 。 


m. : 
transition 属性 是 一 个 简写 属性 ， 用 于 设置 四 个 过 渡 属 性 : 


e transition-property 

e transition-duration 

e transition-timing-function 
e transition-delay 


注释 : 请 始终 设置 transition-duration 属性 ， 否 则 时 长 为 0， 就 不 会 


Opera 


JavaScript 语法 : 


* 

s, 
吞 法 
transition: 


值 
transition-property 
transition-duration 
transition-timing-function 


transition-delay 


QOO tra Anf 
LCOS transition SI 


_property_ _duration_ 


all 0 ease 0 


object.style.transition="width 2s" 


_timing-function_ _delay_; 


描述 
设置 过 渡 效 果 的 CSS 属性 的 名 称 。 
过 渡 效 果 需 要 多 少 秒 或 毫秒 。 
速度 效果 的 速度 曲线 。 
过 渡 效 果 何 时 开始 。 


CSS3 transition-property 属性 
实例 


把 鼠标 指针 放 到 div 元 素 上 ， 会 产生 带 有 平滑 改变 元 素 宽 度 的 过 渡 效 果 : 


div 

t 

transition-property:width; 

-moz-transition-property: width; /* Firefox 4 */ 
-webkit-transition-property:width; /* Safari 和 Chrome */ 
-o-transition-property:width; /* Opera */ 


} 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox, Opera 和 Chrome 支持 transition-property 属性 。 
Safari 支持 替代 的 -webkit-transition-property 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 transition-property 属性 。 


n. : 
transition-property 属性 规定 应 用 过 渡 效 果 的 CSS 属性 的 名 称 。 ( 当 指 定 的 CSS 属性 改变 
时 ， 过 渡 效 果 将 开始 ) 。 

提示 : 过 渡 效 果 通 常 在 用 户 将 鼠标 指针 浮动 到 元 素 上 时 发 生 。 


注释 : 请 始终 设置 transition-duration 属性 ， 否 则 时 长 为 0， 就 不 会 产生 过 渡 效 果 。 
默认 值 : all 
继承 性 : no 
版 本 CSS3 


JavaScript 语法 : object.style.transitionProperty-"width,height" 


transition-property: none|all| property ; 


值 描述 
none 没有 属性 会 获得 过 渡 效 果 。 
all 所 有 属性 都 将 获得 过 渡 效 果 。 


property 定义 应 用 过 渡 效 果 的 CSS 属性 名 称 列 表 ， 列 表 以 喜 号 分 隔 。 


CSS3 transition-duration 属性 


实例 
过 渡 效 果 持续 5 秒 : 


div 

{ 

transition-duration: 5s; 

-moz-transition-duration: 5s; /* Firefox 4 */ 
-webkit-transition-duration: 5s; /* Safari 和 Chrome */ 
-o-transition-duration: 5s; /* Opera */ 


} 


浏览 器 文 持 


IE Firefox Chrome Safari Opera 


Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-duration 属性 。 
Safari 支持 替代 的 -webkit-transition-duration 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 transition-duration 属性 。 


定义 和 用 法 


transition-duration 属性 规定 完成 过 渡 效 果 需 要 花费 的 时 间 (以 秒 或 毫秒 计 ) 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.transitionDurationz"5s" 


语法 


transition-duration: time ; 


time 


规定 完成 过 


默认 值 是 0， 


值 


渡 效 果 需 要 花费 的 时 间 (以 秒 或 毫秒 计 ) 。 
意味 着 不 会 有 效果 。 


CSS3 transition-timing-function 属性 


实例 
以 相同 的 速度 从 开始 到 结束 的 过 渡 效 果 : 


div 

{ 

transition-timing-function: linear; 
-moz-transition-timing-function: linear; /* Firefox 4 */ 
-webkit-transition-timing-function: linear; /* Safari 和 Chrome */ 
-o-transition-timing-function: linear; /* Opera */ 


} 
2) EAF 
IE Firefox Chrome Safari Opera 


Internet Explorer 10, Firefox, Opera 和 Chrome 支持 transition-timing-function 属性 。 
Safari 支持 替代 的 -webkit-transition-timing-function 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 transition-timing-function 属性 。 


ras. : 
定义 和 用 法 
transition-timing-function 属性 规定 过 渡 效 果 的 速度 曲线 。 


该 属性 允许 过 渡 效 果 随 着 时 间 来 改变 其 速度 。 


默认 值 : ease 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.transitionTimingFunctionz"linear" 


语法 


transition-timing-function: linear |easeļ|ease-inļ|ease-out|ease-in-out|cubic- 
bezier( n , n., n, n ); 





值 描述 
规定 以 相同 速度 开始 至 结束 的 过 渡 效 果 (等 于 cubic- 


ingar bezier(0,0,1,1)) 。 
em 规定 慢 束 开始， 然后 变 快 ， 然 后 慢 速 结束 的 过 渡 效 果 (cubic- 
bezier(0.25,0.1,0.25,1)) 。 

ease-in 规定 以 慢 速 开始 的 过 渡 效 果 (等 于 cubic-bezier(0.42,0,1,1)) 。 

ease-out 规定 以 慢 速 结束 的 过 渡 效 果 (等 于 cubic-bezier(0,0,0.58,1)) 。 
规定 以 慢 速 开始 和 结束 的 过 渡 效 果 (等 于 cubic- 

ESSO bezier(0.42,0,0.58,1)) 。 

cubic- f£ cubic-bezier KH ŒL B DÉJA. PRERJA E O 至 1 之 间 的 数 

bezier(n,n,n,n) 值 。 


提示 : 请 在 实例 中 测试 不 同 的 值 ， 这 样 可 以 更 好 地 理解 它们 的 工作 原理 。 


亲自 试 一 试 - 实例 


实例 1 
为 了 更 好 地 理解 不 同 的 函数 值 ， 请 看 下 面 带 有 五 个 不 同 值 的 五 个 不 同 的 div 7538 : 


#div1 {transition-timing-function: linear;} 

#div2 {transition-timing-function: ease;} 

#div3 {transition-timing-function: ease-in;} 

#div4 {transition-timing-function: ease-out;} 

#div5 {transition-timing-function: ease-in-out;) 

/* Firefox 4: */ 

#div1 ([-moz-transition-timing-function: linear;) 
#div2 [-moz-transition-timing-function: ease;} 

#div3 {-moz-transition-timing-function: ease-in;} 
#div4 {-moz-transition-timing-function: ease-out;} 
#div5 {-moz-transition-timing-function: ease-in-out;} 
/* Safari and Chrome: */ 

#div1 {-webkit-transition-timing-function: linear;} 
#div2 {-webkit-transition-timing-function: ease;j 
#div3 {-webkit-transition-timing-function: ease-in;} 
#div4 {-webkit-transition-timing-function: ease-out;} 
#div5 {-webkit-transition-timing-function: ease-in-out;} 
/* Opera: */ 

#div1 {-o-transition-timing-function: linear;} 

#div2 {-o-transition-timing-function: ease;} 

#div3 {-o-transition-timing-function: ease-in;j 

#div4 {-o-transition-timing-function: ease-out;} 
#div5 {-o-transition-timing-function: ease-in-out;j 


实例 2 


与 上 例 相 同 ， 但 通过 cubic-bezier 来 规定 速度 曲线 : 


#div1 [transition-timing-function: cubic-bezier(0,0,1,1;) 

#div2 [transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);) 
#div3 [transition-timing-function: cubic-bezier(0.42,0,1,1);) 

#div4 [transition-timing-function: cubic-bezier(0,0,0.58,1);) 

#div5 [transition-timing-function: cubic-bezier(0.42,0,0.58,1);) 

/* Firefox 4: */ 

#div1 [-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);) 
zdiv2 [-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);) 
#div3 [-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);) 
#div4 [-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);) 
zdiv5 [-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);) 
/* Safari and Chrome: */ 

#div1 [-webkit-transition-timing-function: cubic-bezier(0,0,1,1;] 

zdiv2 [-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);) 
zdiv3 [-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);) 
#div4 ([-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);) 
#div5 [-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);) 
/* Opera: */ 

#div1 [-o-transition-timing-function: cubic-bezier(0,0,1,1;) 

#div2 [-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);) 
Zdiv3 [-o-transition-timing-function: cubic-bezier(0.42,0,1,1);) 

#div4 [-o-transition-timing-function: cubic-bezier(0,0,0.58,1);) 

zdiv5 [-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);) 


CSS3 transition-delay 属性 


实例 
过 渡 效 果 开始 前 等 待 2 W : 


div 

{ 

transition-delay: 2s; 

-moz-transition-delay: 2s; /* Firefox 4 */ 
-webkit-transition-delay: 2s; /* Safari 和 Chrome */ 
-o-transition-delay: 2s; /* Opera */ 


} 


浏览 器 支持 


IE Firefox Chrome Safari Opera 


Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性 。 
Safari 支持 替代 的 -webkit-transition-delay 属性 。 


注释 : Internet Explorer 9 以 及 更 早 版 本 的 浏览 器 不 支持 transition-delay 属性 。 


= : 
transition-delay 属性 规定 过 渡 效 果 何 时 开始 。 


transition-delay 值 以 秒 或 毫秒 计 。 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.transitionDelay-"2s" 


吾 法 


transition-delay: time ; 


值 描述 
time 规定 在 过 渡 效 果 开始 之 前 需要 等 待 的 时 间 ， 以 秒 或 毫秒 计 。 


用 户 界 面 属 性 (User-interface) 


属性 
appearance 
box-sizing 
icon 
nav-down 
nav-index 
nav-left 
nav-right 
nav-up 
outline-offset 


resize 


描述 
允许 您 将 元 素 设置 为 标准 用 户 界 面 元 素 的 外 观 
允许 您 以 确切 的 方式 定义 适应 某 个 区 域 的 具体 内 容 。 
为 创作 者 提供 使 用 图 标 化 等 价 物 来 设置 元 素 样式 的 能 力 。 
见 定 在 使 用 arrow-down 导航 键 时 向 何 处 导航 。 
设置 元 素 的 tab 键 控制 次 序 。 
规定 在 使 用 arrow-left 导航 键 时 向 何 处 导航 。 
规定 在 使 用 arrow-right 导航 键 时 向 何 处 导航 。 
规定 在 使 用 arrow-up 导航 键 时 向 何 处 导航 。 
对 轮廓 进行 偏 移 ， 并 在 超出 边框 边缘 的 位 置 绘 制 轮廓 。 
规定 是 否 可 由 用 户 对 元 素 的 尺寸 进行 调整 。 


»- 


CSS 


C CQ CQ CQ CQ CQ C OQ C wm 


CSS3 appearance 属性 


实例 
使 div 元 素 看 上 去 像 一 个 按钮 : 


div 
1 


appearance:button; 
-moz-appearance:button; /* Firefox */ 
-webkit-appearance:button; /* Safari 和 Chrome */ 


J 
页 面 底 部 有 更 多 实例 。 
浏览 器 文 持 
所 有 主流 浏览 器 都 不 支持 appearance 属性 。 


Firefox 支持 替代 的 -moz-appearance 属性 。 


Safari 和 Chrome 支持 替代 的 -webkit-appearance 属性 。 


定义 和 用 法 


appearance 属性 允许 您 使 元 素 看 上 去 像 标 准 的 用 户 界面 元 素 。 


默认 值 : normal 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.appearance-"button" 


语法 


appearance: normal|icon|window|button|menu|field; 


值 
normal 
icon 
Window 
button 
menu 


field 


将 元 素 呈 现 为 常规 元 素 。 

将 元 素 呈 现 为 图 标 〈 小 图 片 ) 。 

将 元 素 呈 现 为 视 口 。 

将 元 素 呈 现 为 按钮 。 

将 元 素 呈 现 为 一 套 供用 户 选 择 的 选项 。 


将 元 素 呈 现 为 输入 字段 。 


CSS3 box-sizing 属性 


实例 

N 

规定 两 个 并 排 的 带 边框 的 框 : 
div 
box-sizing:border-box; 
-moz-box-sizing:border-box; /* Firefox */ 
-webkit-box-sizing:border-box; /* Safari */ 
width :5096; 


float:left; 
} 


页 面 底部 有 更 多 实例 。 


浏览 器 支持 
IE Firefox Chrome Safari Opera 


Internet Explorer, Opera 以 及 Chrome 支持 box-sizing 属性 。 


Firefox 支持 替代 的 -moz-box-sizing 属性 。 


定义 和 用 法 
box-sizing 属性 允许 您 以 特定 的 方式 定义 匹配 某 个 区 域 的 特定 元 素 。 


例如 ， 假 如 您 需要 并 排放 置 两 个 带 边 框 的 框 ， 可 通过 将 box-sizing 设置 为 "border-box"。 这 可 
使 浏览 器 呈现 出 带 有 指定 宽度 和 高 度 的 框 ， 并 把 边框 和 内 边 距 放 入 框 中 。 


默认 值 : content-box 


继承 性 : no 


JavaScript 语法 : object.style.boxSizing-"border-box" 


吾 法 


box-sizing: content-box|border-box|inherit; 


m 
Br 
[d 


content-box 

这 是 由 CSS2.1 规定 的 宽度 高 度 行为 。 

宽度 和 高 度 分 别 应 用 到 元 素 的 内 容 框 。 

在 宽度 和 高 度 之 外 绘制 元 素 的 内 边 距 和 边框 。 

| | border-box | 

为 元 素 设 定 的 宽度 和 高 度 决定 了 元 素 的 边框 盒 。 

就 是 说 ， 为 元 素 指定 的 任何 内 边 距 和 边框 都 将 在 已 设 定 的 宽度 和 高 度 内 进行 绘制 。 
通过 从 已 设 定 的 宽度 和 高 度 分 别 减 去 边框 和 内 边 距 才能 得 到 内 容 的 宽度 和 高 度 。 


| | inherit | 规定 应 从 父 元 素 继承 box-sizing 属性 的 值 。 | 


相关 页 面 


CSS3 教程 : CSS3 用 户 界 面 


CSS3 icon 属性 


实例 
将 图 像 元 素 设置 为 图 标 化 的 等 价 物 : 


Img 


content:icon; 
icon:url(imgicon.png); 


浏览 器 支持 

IE Firefox Chrome Safari 
目前 没有 浏览 器 支持 icon 属性 。 
定义 和 用 法 


icon 属性 为 创作 者 提供 了 将 元 素 设 置 为 图 标 等 价 物 的 能 力 。 
注释 : 除非 "content" 属性 的 值 被 设置 为 "icon"， 否 则 元 素 的 图 标 不 会 被 使 用 。 


默认 值 : auto 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.icon-"url(image.png)" 


语法 


icon: auto|_URL_|inherit; 


Opera 


值 描述 


auto 使 用 由 浏览 器 提供 的 默认 通用 图 标 。 
URL 引用 列表 中 的 一 个 或 多 个 图 标 ， 列 表 用 逗号 分 隔 。 


inherit 规定 应 从 元 素 继承 icon 属性 的 值 。 


CSS3 nav-down 属性 


例 


规定 在 使 用 方向 键 时 向 何 处 导航 : 


将 


button#b1 


{ 

top:20%;left:25%; 
nav-index:1; 
nav-right:£Zb2;nav-left:4b4; 
nav -down:£b2;nav-up:£b4; 


} 


button#b2 


{ 

top:40%;left:50%; 
nav-index:2; 
nav-right:#b3;nav-left:#b1; 
nav-down:#b3;nav-up:#b1; 


} 


button#b3 


{ 

top:70%;left:25%; 
nav-index:3; 
nav-right:#b4;nav-left:#b2; 
nav-down:#b4;nav-up:#b2; 


} 


button#b4 


{ 

top:4096; left : 096; 
nav-index:4; 
nav-right:£Zb1;nav-left:4Zb3; 
nav -down:£b1;nav-up:£b3; 


} 


浏览 器 支持 
目前 只 有 Opera 支持 nav-down 属性 。 
定义 和 用 法 


nav-down 属性 规定 当 使 用 nav-down 导航 键 时 ， 向 何 处 进行 导航 。 


默认 值 : auto 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.navDown="#div2" 
语法 


nav-down: auto| id | target-name |inherit; 


值 描述 
auto 浏览 器 决定 导航 到 哪个 元 素 。 
id 规定 被 导航 元 素 的 id。 
target-name 规定 被 导航 的 目标 框架 。 


inherit 规定 应 从 父 元 素 继承 nav-down 属性 的 值 。 


CSS3 nav-index 属性 


例 


规定 在 使 用 方向 键 时 向 何 处 导航 : 


将 


button#b1 


{ 

top:20%;left:25%; 
nav-index:1; 
nav-right:£Zb2;nav-left:4b4; 
nav -down:£b2;nav-up:£b4; 


} 


button#b2 


{ 

top:40%;left:50%; 
nav-index:2; 
nav-right:#b3;nav-left:#b1; 
nav-down:#b3;nav-up:#b1; 


} 


button#b3 


{ 

top:70%;left:25%; 
nav-index:3; 
nav-right:#b4;nav-left:#b2; 
nav-down:#b4;nav-up:#b2; 


} 


button#b4 


{ 

top:4096; left : 096; 
nav-index:4; 
nav-right:£Zb1;nav-left:4Zb3; 
nav -down:£b1;nav-up:£b3; 


} 


浏览 器 支持 
目前 只 有 Opera 支持 nav-index 属性 。 
定义 和 用 法 


nav-index 属性 规定 元 素 的 连续 导航 次 序 ("tabbing order"). 


默认 值 : auto 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.navIndex-2 
语法 


nav-index: auto| number J|inherit; 


值 描述 
auto 由 浏览 器 分 配 元 素 的 导航 键 控制 次 序 。 
number 指示 元 素 的 导航 键 控制 次 序 。1 代表 第 一 个 。 


inherit 规定 应 从 父 元 素 继 承 nav-index 属性 的 值 。 


CSS3 nav-left 属性 


例 


规定 在 使 用 方向 键 时 向 何 处 导航 : 


将 


button#b1 


{ 

top:20%;left:25%; 
nav-index:1; 
nav-right:£Zb2;nav-left:4b4; 
nav -down:£b2;nav-up:£b4; 


} 


button#b2 


{ 

top:40%;left:50%; 
nav-index:2; 
nav-right:#b3;nav-left:#b1; 
nav-down:#b3;nav-up:#b1; 


} 


button#b3 


{ 

top:70%;left:25%; 
nav-index:3; 
nav-right:#b4;nav-left:#b2; 
nav-down:#b4;nav-up:#b2; 


} 


button#b4 


{ 

top:4096; left : 096; 
nav-index:4; 
nav-right:£Zb1;nav-left:4Zb3; 
nav -down:£b1;nav-up:£b3; 


} 


浏览 器 支持 
目前 只 有 Opera 支持 nav-left 属性 。 
定义 和 用 法 


nav-left 属性 规定 当 使 用 nav-left 导航 键 时 ， 向 何 处 进行 导航 。 


默认 值 : auto 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.navLeft="#div2" 
语法 


nav-left: auto| id | target-name |inherit; 


值 描述 
auto 浏览 器 决定 导航 到 哪个 元 素 。 
id 规定 被 导航 元 素 的 id。 
target-name 规定 被 导航 的 目标 框架 。 


inherit 规定 应 从 父 元 素 继承 nav-left 属性 的 值 。 


CSS3 nav-right 属性 


例 


规定 在 使 用 方向 键 时 向 何 处 导航 : 


将 


button#b1 


{ 

top:20%;left:25%; 
nav-index:1; 
nav-right:£Zb2;nav-left:4b4; 
nav -down:£b2;nav-up:£b4; 


} 


button#b2 


{ 

top:40%;left:50%; 
nav-index:2; 
nav-right:#b3;nav-left:#b1; 
nav-down:#b3;nav-up:#b1; 


} 


button#b3 


{ 

top:70%;left:25%; 
nav-index:3; 
nav-right:#b4;nav-left:#b2; 
nav-down:#b4;nav-up:#b2; 


} 


button#b4 


{ 

top:4096; left : 096; 
nav-index:4; 
nav-right:£Zb1;nav-left:4Zb3; 
nav -down:£b1;nav-up:£b3; 


} 


浏览 器 支持 
目前 只 有 Opera 支持 nav-right 属性 。 
定义 和 用 法 


nav-right 属性 规定 当 使 用 nav-right 导航 键 时 ， 向 何 处 进行 导航 。 


默认 值 : auto 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.navRight="#div2" 
语法 


nav-right: auto| id | target-name |inherit; 


值 描述 
auto 浏览 器 决定 导航 到 哪个 元 素 。 
id 规定 被 导航 元 素 的 id。 
target-name 规定 被 导航 的 目标 框架 。 


inherit 规定 应 从 父 元 素 继承 nav-right 属性 的 值 。 


CSS3 nav-up 属性 


例 


规定 在 使 用 方向 键 时 向 何 处 导航 : 


将 


button#b1 


{ 

top:20%;left:25%; 
nav-index:1; 
nav-right:£Zb2;nav-left:4b4; 
nav -down:£b2;nav-up:£b4; 


} 


button#b2 


{ 

top:40%;left:50%; 
nav-index:2; 
nav-right:#b3;nav-left:#b1; 
nav-down:#b3;nav-up:#b1; 


} 


button#b3 


{ 

top:70%;left:25%; 
nav-index:3; 
nav-right:#b4;nav-left:#b2; 
nav-down:#b4;nav-up:#b2; 


} 


button#b4 


{ 

top:4096; left : 096; 
nav-index:4; 
nav-right:£Zb1;nav-left:4Zb3; 
nav -down:£b1;nav-up:£b3; 


} 


浏览 器 支持 
目前 只 有 Opera 支持 nav-up 属性 。 
定义 和 用 法 


nav-up 属性 规定 当 使 用 nav-up 导航 键 时 ， 向 何人 处 进行 导航 。 


默认 值 : auto 


继承 性 : no 

版 本 CSS3 

JavaScript 语法 : object.style.navUp="#div2" 
语法 


nav-up: auto| id | target-name J|inherit; 


值 描述 
auto 浏览 器 决定 导航 到 哪个 元 素 。 
id 规定 被 导航 元 素 的 id。 
target-name 规定 被 导航 的 目标 框架 。 


inherit 规定 应 从 父 元 素 继承 nav-up 属性 的 值 。 


CSS3 outline-offset 属性 


例 


规定 边框 边缘 之 外 15 像素 处 的 轮廓 : 


将 


div 


{ 

border:2px solid black; 
outline:2px solid red; 
outline-offset:15px; 

} 


浏览 器 支持 


所 有 主流 浏览 器 都 支持 outline-offset 属性 ， 除 了 Internet Explorer。 


ra. S 

定义 和 用 法 

outline-offset 属性 对 轮廓 进行 偏 移 ， 并 在 边框 边缘 进行 绘制 。 
轮廓 在 两 方面 与 边框 不 同 : 


。 轮廓 不 占用 空间 
。 轮廓 可 能 是 非 矩 形 


默认 值 : 0 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.outlineOffset="15px" 


outline-offset: _length_|inherit; 
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值 描述 
length 轮廓 与 边框 边缘 的 距离 。 
inherit 规定 应 从 父 元 素 继 承 outline-offset 属性 的 值 。 





出 
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CSS3 resize 属性 


实例 
规定 可 以 由 用 户 调整 div 元 素 的 大 小 : 
div 


resize:both; 
overflow:auto; 


浏览 器 文 持 


Firefox 4+、Chrome 以 及 Safari 不 支持 resize。 


定义 和 用 法 
resize 属性 规定 是 否 可 由 用 户 调整 元 素 的 尺寸 。 


注释 : 如 果 希 望 此 属性 生效 ， 需 要 设置 元 素 的 overflow 属性 ， 值 可 以 是 auto, hidden 或 
scroll, 


默认 值 : none 
继承 性 : no 
版 本 CSS3 
JavaScript 语法 : object.style.resize-"both" 


吾 法 


resize: none|both|horizontal|vertical; 


值 描述 


none 用 户 无 法 调整 元 素 的 尺寸 。 
both 用 户 可 调整 元 素 的 高 度 和 宽度 。 
horizontal 用 户 可 调整 元 素 的 宽度 。 
vertical 用 户 可 调整 元 素 的 高 度 。 


相关 页 面 


CSS3 教程 : CSS3 用 户 界 面 


CSS; 


我 们 会 


选择 器 参考 手册 


定期 对 W3School 的 CSS 参考 手册 进行 浏览 器 测试 。 


CSS3 xt its 


ft CSS 中 ， 选 择 器 是 一 种 模式 ， 用 于 选择 需要 添加 样式 的 元 素 。 


"CSS" 列 指示 该 属性 是 在 哪个 CSS 版 本 中 定义 的 。 (CSS1. CSS2 还 是 CSS3。) 
选择 器 例子 例子 描述 css 
class .intro 选择 class="intro" 的 所 有 元 素 。 1 
#id #firstname 选择 id="firstname" 的 所 有 元 素 。 1 
选择 所 有 元 素 。 2 
element p 选择 所 有 «p» 元 素 。 1 
element,element div,p x8 «div» 元 素 和 所 有 <p> 元 1 
t xn 
element element div p x «div» 元 素 内 部 的 所 有 <p> 元 1 
element»element div>p 选择 父 父 元 素 为 <div> 元 素 的 所 有 <p> 2 
元 素 。 
element*element div+p 选择 紧 接 在 <div> 元 素 之 后 的 所 有 2 
«p» 元 素 。 
[attribute] [target] 选择 带 有 target 属性 所 有 元 素 。 2 
[attribute-value] [target=_blank] ”选择 target="_blank" 的 所 有 元 素 。 2 
选择 title 属性 包含 单词 "flower" 的 所 
[attribute--value] [title~=flowen] ， 2 
[attribute|-value] [lang|-en] 2 lang 属性 值 以 "en" 开头 的 所 有 2 
:link a:link 选择 所 有 未 被 访问 的 链接 。 1 
:visited a:visited 选择 所 有 已 被 访问 的 链接 。 1 
:active a:active 选择 活动 链接 。 1 
:hover a:hover 选择 鼠标 指针 位 于 其 上 的 链接 。 1 
"focus input:focus 选择 获得 焦点 的 input 元素 。 2 
:first-letter p:first-letter 选择 每 个 «p» 元 素 的 首 字 母 。 1 


:first-line 


:first-child 


:before 


:after 


:Jang(language) 


element1-element2 


[attribute^-value] 


[attribute$-value] 


[attribute*-value] 


:first-of-type 


:ast-of-type 


:only-of-type 


:only-child 


:nth-child(n) 


:nth-last-child(n) 


:nth-of-type(n) 


:nth-last-of-type(n) 


:last-child 
:root 
:empty 


:target 


p:first-line 


p:first-child 


p:before 


p:after 


p:lang(it) 


p-ul 


a[src^-"https"] 


a[src$-".pdf"] 


a[src*-"abc"] 


p:first-of-type 


p:last-of-type 


p:only-of-type 


p:only-child 


p:nth-child(2) 


p:nth-last- 
child(2) 


p:nth-of- 
type(2) 


p:nth-last-of- 
type(2) 


p:last-child 
:root 
p:empty 


?inews:target 


选择 每 个 <p> 元 素 的 首 行 。 

选择 属于 父 元 素 的 第 一 个 子 元 素 的 每 
SD UD. 

在 每 个 «p» 元 素 的 内 容 之 前 插入 内 
zu 

在 每 个 <p> 元 素 的 内 容 之 后 插入 内 
o 

选择 带 有 以 "it" 开头 的 lang 属性 值 的 
f «p» 元 素 。 


选择 前 面 有 <p> 元 素 的 每 个 <ul> 元 


& 


选择 其 src 属性 值 以 "https" 开头 的 每 
个 «a» 元 素 。 

选择 其 src 属性 以 ".pdf" 结尾 的 所 有 
<a> 元 素 。 


选择 其 src 属性 中 包含 "abc" FRH 
每 个 «a» 元 素 。 


选择 属于 其 父 元 素 的 首 个 <p> 元 素 的 
每 个 <p> 元 素 。 


选择 属于 其 父 元 素 的 最 后 <p> 元 素 的 
每 个 <p> 元 素 。 


选择 属于 其 父 元 素 唯一 的 <p> 元 素 的 
每 个 <p> 元 素 。 


选择 属于 其 父 元 素 的 唯一 子 元 素 的 每 
个 <p> 元 素 。 


选择 属于 其 父 元 素 的 第 二 个 子 元 素 的 
每 个 <p> 元 素 。 

同上 ， 从 最 后 一 个 子 元 素 开 始 计 数 。 
选择 属于 其 父 元 素 第 二 个 <p> 元 素 的 
每 个 <p> 元 素 。 


同上 ， 但 是 从 最 后 一 个 子 元 素 开 始 计 
数 。 


选择 属于 其 父 元 素 最 后 一 个 子 元 素 每 
个 <p> 元 素 。 


选择 文档 的 根 元 素 。 


选择 没有 子 元 素 的 每 个 «p» TR (8 
括 文 本 节点 ) 。 


选择 当前 活动 的 #news 元 素 。 
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:enabled 
:disabled 
:checked 
:not(selector) 


zselection 


input:enabled 
input:disabled 
input:checked 


:not(p) 


zselection 


选择 每 个 启用 的 «input» 元 素 。 
选择 每 个 禁用 的 <input> 元 素 
选择 每 个 被 选中 的 «input» 元 素 。 


选择 非 <p> 元 素 的 每 个 元 素 。 
选择 被 用 户 选取 的 元 素 部 分 。 
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CSS 听 党 参考 手册 
听觉 样式 表 


听觉 样式 表 可 把 语音 合成 与 音响 效果 相 组 合 ， 使 用 户 可 以 听 到 信息 ， 而 无 需 进 


当 
加 
dB 
H 


听觉 呈 


e 视觉 能 力 低 弱 的 人 士 
。 帮助 用 户 学 习 阅 读 

。 帮助 有 阅读 障碍 的 用 户 
。 RIER H 

。 在 汽车 中 使 用 


行 阅读 。 


听觉 呈现 通常 会 把 文档 转化 为 纯 文本 ， 然 后 传 给 屏幕 阅读 器 (可 读 出 屏幕 上 所 有 字符 的 一 种 


程序 ) 。 
听觉 样式 表 的 一 个 例子 : 


hi, h2, h3, h4 

t 

voice-family: male; 
richness: 80; 

cue-before: url("beep.au") 


} 


上 面 的 例子 可 以 让 语音 合成 器 演奏 一 段 声 音 ， 然 后 用 男性 的 声音 读 出 标题 。 


CSS2 听觉 参考 


W3C : "W3C" 列 的 数字 显示 出 属性 由 哪个 CSS 标准 定义 (CSS1 还 是 CSS2) 。 


属性 描述 值 


angle left-side 
far-left left 


Sets where the sound/voices center-left center 
azimuth should come from center-right right 
(horizontally) far-right right-side 


behind leftwards 
rightwards 


A shorthand property for 
setting the cue-before and 
cue-after properties in one 
declaration 


cue 


cue-before cue-after 


W3C 


cue-after 


cue-before 


elevation 


pause 


pause-after 


pause- 
before 


pitch 


pitch-range 


play-during 


richness 


speak 


speak- 
header 


speak- 
numeral 


speak- 
punctuation 


speech- 
rate 


Specifies a sound to be played 
after speaking an element's 
content to delimit it from other 


Specifies a sound to be played 
before speaking an element's 
content to delimit it from other 


Sets where the sound/voices 
should come from (vertically) 


A shorthand property for 
setting the pause-before and 
pause-after properties in one 
declaration 


Specifies a pause after 
speaking an element's content 


Specifies a pause before 
speaking an element's content 


Specifies the speaking voice 


Specifies the variation in the 
speaking voice. (Monotone 
voice or animated voice?) 


Specifies a sound to be played 
while speaking an element's 
content 


Specifies the richness in the 
speaking voice. (Rich voice or 
thin voice?) 


Specifies whether content will 
render aurally 


Specifies how to handle table 
headers. Should the headers 
be spoken before every cell, or 
only before a cell with a 
different header than the 
previous cell 


Specifies how to speak 
numbers 


Specifies how to speak 
punctuation characters 


Specifies the speed of the 
speaking 


Specifies the "stress" in the 


none 


none 


angle 
above 


pause- 


time 


time 


freque 
medium 


number 


auto 
repeat 


number 


normal 


always 


digits 


none 


number 
medium 
faster 


url 
url 
belo level 
higher lower 
before  pause-after 
96 
96 
ncy  x-low low 


high  x-high 


none url mix 


none  spell-out 


once 


continuous 


code 
x-slow slow 

fast 

slower 


x-fast 


stress 


voice- 
family 


volume 


speaking voice 


A prioritized list of voice family 
names that contain specific 


voices 


Specifies the volume of the 


speaking 


number 


specific-voice 
generic-voice 


number % silent 
x-soft soft medium 
loud x-loud 


CSS 网 络 安全 字体 组 合 


音 用 的 字体 组 合 


font-family 属性 应 该 使 用 若干 种 字体 名 称 作为 回 退 系统 ， 以 确保 浏览 器 /操作 系统 之 间 的 最 大 
兼容 性 。 如 果 浏览 器 不 支持 第 一 个 字体 ， 则 会 尝试 下 一 个 。 


请 以 您 喜欢 的 字体 开始 ， 并 以 通用 字体 系列 结束 ， 以 便 使 浏览 器 在 通用 系统 中 挑选 相似 的 字 
体 ， 如 果 没 有 其 他 字体 可 用 的 话 : 


实例 


p{font-family:'Times New Roman', Times, serif} 


下 面 是 最 常用 的 字体 组 合 ， 根 据 通用 系统 进行 江 总 : 


W3School CSS 参考 手册 





























Serif PU 
font-family “示例 文本 
pe serif Thisisa heading j 
| This is a paragraph 
'Palatino Linotype', 'Book Antiqua', Palatino, serif | This is a heading 
| This is a paragraph 
| "Times New Roman’, Times, serif | This is a heading 
| This is a paragraph 
Sans-Serif 宇 体 
font-family TARE 





Arial, Helvetica, sans-serif 


| This is a heading 


| This is a paragraph 





Arial Black', Gadget, sans-serif 


This is a heading 


| This is a paragraph 





'Comic Sans MS', cursive, sans-serif 


This is a heading 


| This is a paragraph 





上 








Impact, Charcoal, sans-serif | Thisis aheading 
This is a paragraph 
'Lucida Sans Unicode', 'Lucida Grande', sans-serif This is a heading 


This is a paragraph 





Tahoma, Geneva, sans-serif 


This is a heading 


| This is a paragraph 





Trebuchet MS', Helvetica, sans-serif 


| This is a heading 


| This is a paragraph 





Verdana, Geneva, sans-serif 





| This is a heading 


| This is a paragraph 


1 








Monospace 字体 





font-family 


示例 文本 





Courier New', Courier, monospace 


| This is a heading 


| This is a paragraph 





‘Lucida Console', Monaco, monospace 





This is a heading 





| This is a paragraph 








对 
Hp 
4i 
* 
党 
Db 
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CSS 单位 


R 
M 描述 
% 百分比 
in 英寸 
cm ”厘米 
mm Æ% 


1em 等 于 当前 的 字体 尺寸 。2em 等 于 当前 字体 尺寸 的 两 倍 。 例 如 ， 如 果 某 元 素 以 
em ”12pt 显示 ， 那 么 2em 是 24pt。 在 CSS rh, em 是 非常 有 用 的 单位 ， 因 为 它 可 以 
自动 适应 用 户 所 使 用 的 字体 。 


ex 一 个 ex 是 一 个 字体 的 x-height, (x-height 通常 是 字体 尺寸 的 一 半 。 ) 
pt 磅 (1 pt 等 于 1/72 英寸 ) 

pc 12 点 活字 (1 pc 等 于 12 点 ) 

px 像素 (计算 机 屏幕 上 的 一 个 点 ) 


颜色 
单位 描述 
(颜色 名 ) 颜色 名 称 (比如 red) 
rgb(x,x,x) RGB 值 (比如 rgb(255,0,0)) 
rgb(x%, x%, x%) RGB 百分比 值 (比如 rgb(100%,0%,0%)) 


#rrggbb 十 六 进 制 数 (比如 #ff0000) 


CSS 颜色 


颜色 是 通过 对 红 、 绿 和 蓝光 的 组 合 来 显示 的 。 


页 色 值 


CSS 颜色 使 用 组 合 了 红 绿 蓝 颜 色 值 (RGB) 的 十 六 进 制 (hex) 表示 法 进行 定义 。 对 光源 进行 设 
置 的 最 低 值 可 以 是 0 (十 六 进 制 00) 。 最 高 值 是 255 (十 六 进 制 FF) 。 


Se 


十 六 进 制 值 使 用 三 个 双 位 数 来 编写 ， 并 以 # 符号 开头 。 


颜色 颜色 HEX 颜色 RGB 
#000000 rgb(0,0,0) 
#FF0000 rgb(255,0,0) 
#00FF00 rgb(0,255,0) 
#0000FF rgb(0,0,255) 
#FFFF00 rgb(255,255,0) 
#00FFFF rgb(0,255,255) 
#FF00FF rgb(255,0,255) 
#COC0C0 rgb(192,192,192) 
#FFFFFF rgb(255,255,255) 


1600 万 种 不 同 的 颜色 
从 0 到 255 种 红 绿 蓝 值 能 够 组 合 出 总 共 超过 一 千 六 百 万 种 不 同 的 颜色 (根据 256 x 256 x 256 
计算 ) 。 
大 多 数 现代 的 显示 器 都 能 显示 出 至 少 16384 种 不 同 的 颜色 。 
如 果 您 查看 下 面 的 表格 ， 您 将 看 到 红 光 从 0 到 255 变化 后 的 结果 ， 此 时 绿 光 和 蓝光 为 需 。 
如 需 查看 红 光 由 0 向 255 变化 的 完整 颜色 混合 器 列表 ， 请 点 击 下 面 的 十 六 进 制 值 或 rgb 值 。 
Red Light HEX RGB 
#000000 rgb(0,0,0) 
#080000 rgb(8,0,0) 
#100000 rgb(16,0,0) 
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0 qmm ——— [WM 
ee 
0 E (m meh 
o #300000 rgb(48,0,0) 

#800000 rgb(128,0,0) 
) 
) 
) 





EN 20 ON 
EN 200 
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IX n 


灰色 使 用 所 有 光源 的 等 量 的 光线 来 显示 。 为 了 让 您 更 方便 地 选择 正确 的 上 灰色， 我 们 已 经 为 


编辑 了 一 个 奈 色 列表 : 


火 阶 


#000000 
#080808 
#101010 
#181818 
#202020 
#282828 
#303030 
#383838 
#404040 
#484848 
#505050 
#585858 
#606060 
#686868 
#707070 
#787878 
#808080 
#888888 
#909090 
#989898 
#A0AOAO 
#A8A8A8 
#BOBOBO 
#B8B8B8 
#COCOCO 
#C8C8C8 
#DODODO 


HEX 


rgb(0,0,0) 
rgb(8,8,8) 
rgb(16,16,16) 
rgb(24,24,24) 
rgb(32,32,32) 
rgb(40,40,40) 
rgb(48,48,48) 
rgb(56,56,56) 
rgb(64,64,64) 
rgb(72,72,72) 
rgb(80,80,80) 
rgb(88,88,88) 
rgb(96,96,96) 
rgb(104,104,104) 
rgb(112,112,112) 
rgb(120,120,120) 
rgb(128,128,128) 
rgb(136,136,136) 
rgb(144,144,144) 
rgb(152.152:152) 
rgb(160,160,160) 
rgb(168,168,168) 
rgb(176,176,176) 
rgb(184,184,184) 
rgb(192,192,192) 
rgb(200,200,200) 
rgb(208,208,208) 


RGB 


AN 


JÈN 


#D8D8D8 


HEOEOEO 


#E8E8E8 


#FOFOFO 
#F8F8F8 


#FFFFFF 


网 络 安全 色 ? 


多 年 前 ， 当 电脑 只 支持 最 多 256 种 颜色 时 ，216 种 “网 络 安 全 色 ” 列 表 被 定义 为 Web 标准 ， 并 


保留 了 40 种 固定 的 系统 颜色 。 


rgb(216,216,216 


rgb(224,224,224 
rgb(232,232,232 


rgb(248,248,248 
rgb(255,255,255 


( ) 
( ) 
( ) 
rgb(240,240,240) 
( ) 
( ) 


现在 ， 这 些 都 不 重要 了 ， 因 为 大 多 数 电 脑 都 能 显示 数 百 万 种 颜色 ， 但 是 选择 权 依 然 在 您 手 


里 。 


这 个 216 跨 浏 览 器 调 色 板 被 创建 的 目的 是 确保 当 计 算 机 


颜色 : 


000000 

003300 
006600 
009900 
00CC00 
00FF00 
330000 
333300 
336600 
339900 
33CC00 
33FF00 
660000 
663300 
666600 
669900 
66CC00 


000033 
003333 
006633 
009933 
00CC33 
00FF33 
330033 
333333 
336633 
339933 
33CC33 
33FF33 
660033 
663333 
666633 
669933 
66CC33 


000066 
003366 
006666 
009966 
00CC66 
00FF66 
330066 
333366 
336666 
339966 
33CC66 
33FF66 
660066 
663366 
666666 
669966 
66CC66 


000099 
003399 
006699 
009999 
00CC99 
00FF99 
330099 
333399 
336699 
339999 
33CC99 
33FF99 
660099 
663399 
666699 
669999 
66CC99 


- sa 


is TT 


0000CC 
0033CC 
0066CC 
0099CC 
00CCCC 
00FFCC 
3300CC 
3333CC 
3366CC 
3399CC 
33CCCC 
33FFCC 
6600CC 
6633CC 
6666CC 
6699CC 
66CCCC 


256 色调 色 板 时 能 够 正确 地 显示 


0000FF 

0033FF 
0066FF 
0099FF 
00CCFF 
00FFFF 
3300FF 
3333FF 
3366FF 
3399FF 
33CCFF 
33FFFF 
6600FF 
6633FF 
6666FF 
6699FF 
66CCFF 


66FF00 
990000 
993300 
996600 
999900 
99CC00 
99FF00 
CC0000 
CC3300 
CC6600 
CC9900 
CCCCOO 
CCFF00 
FF0000 
FF3300 
FF6600 
FF9900 
FFCCOO 
FFFF00 


66FF33 
990033 
993333 
996633 
999933 
99CC33 
99FF33 
CC0033 
CC3333 
CC6633 
CC9933 
CCCC33 
CCFF33 
FF0033 
FF3333 
FF6633 
FF9933 
FFCC33 
FFFF33 


66FF66 
990066 
993366 
996666 
999966 
99CC66 
99FF66 
CC0066 
CC3366 
CC6666 
CC9966 
CCCC66 
CCFF66 
FF0066 
FF3366 
FF6666 
FF9966 
FFCC66 
FFFF66 


66FF99 
990099 
993399 
996699 
999999 
99CC99 
99FF99 
CC0099 
CC3399 
CC6699 
CC9999 
CCCC99 
CCFF99 
FF0099 
FF3399 
FF6699 
FF9999 
FFCC99 
FFFF99 


66FFCC 
9900CC 
9933CC 
9966CC 
9999CC 
99CCCC 
99FFCC 
CCOOCC 
CC33CC 
CC66CC 
CC99CC 
CCCCCC 
CCFFCC 
FFO0CC 
FF33CC 
FF66CC 
FF99CC 
FFCCCC 
FFFFCC 


66FFFF 
9900FF 
9933FF 
9966FF 
9999FF 
99CCFF 
99FFFF 
CCOOFF 
CC33FF 
CC66FF 
CC99FF 
CCCCFF 
CCFFFF 
FFOOFF 
FF33FF 
FF66FF 
FF99FF 
FFCCFF 
FFFFFF 


CSS 合法 颜色 值 


CSS 颜色 


可 以 用 以 下 方法 来 规定 CSS 中 的 颜色 : 


e 十 六 进 制 色 

。 RGB 颜色 

e RGBA 颜色 

。 HSL 颜色 

e HSLA 颜色 

。 预定 义 / 跨 浏 览 器 颜色 名 


十 六 进 制 颜 色 


所 有 浏览 器 都 支持 十 六 进 制 颜色 值 。 


十 六 进 制 颜色 是 这 样 规定 的 : #RRGGBB， 其 中 的 RR (红色 ) 、GG (绿色 ) 、BB (HE) 
十 六 进 制 整数 规定 了 颜色 的 成 分 。 所 有 值 必 须 介 于 0 与 FF 之 间 。 

举例 说 ，#0000ff 值 显示 为 蓝 色 ， 因为 蓝 色 成 分 被 设置 为 最 高 值 (ff) ， 而 其 他 成 分 被 设 
置 为 0。 

实例 


p 


background-color :#0000ff; 


RGB 颜色 


所 有 浏览 器 都 支持 RGB 颜色 值 。 


RGB 颜色 值 是 这 样 规 定 的 : rgb(red, green, blue)。 每 个 参数 (red. green 以 及 blue) 定义 颜 
色 的 强度 ， 可 以 是 介 于 0 与 255 之 间 的 整数 ， 或 者 是 百分比 值 (从 0% 到 100%) 。 


举例 说 ，rgb(0,0,255) 值 显示 为 蓝 色 ， 这 是 因为 blue 参数 被 设置 为 最 高 值 (255) ， 而 其 他 被 
设置 为 0。 


同样 地 ， 下 面 的 值 定 义 了 相同 的 颜色 : rgb(0,0,255) 和 rgb(0%,0%,100%)。 


实例 


p 


{ 
background-color :rgb(255,0,0); 


RGBA 颜色 

RGBA 颜色 值得 到 以 下 浏览 器 的 支持 : E9+, Firefox 3+, Chrome, Safari 以 及 Opera 
10+。 

RGBA 颜色 值 是 RGB 颜色 值 的 扩展 ， 带 有 一 个 alpha 通道 - 它 规定 了 对 象 的 不 透明 度 。 


RGBA 颜色 值 是 这 样 规 定 的 : rgba(red, green, blue, alpha), alpha 参数 是 介 于 0.0 (完全 透 
明 ) 与 1.0 (完全 不 透明 ) 的 数字 。 


实例 


p 


background-color:rgba(255,0,0,0.5); 


HSL 颜色 


HSL 颜色 值得 到 以 下 浏览 器 的 支持 : IE9+、Firefox、Chrome、Safari 以 及 Opera 10+, 


HSL 指 的 是 hue (色调 ) 、saturation 〈 饱 和 度 ) 、lightness (亮度 ) - 表示 颜色 柱 面 坐标 表 
示 法 。 

HSL 颜色 值 是 这 样 规定 的 : hsl(hue, saturation, lightness). 

Hue 是 色 盘 上 的 度数 (从 0 到 360) -0 (或 360) 是 红色 ，120 是 绿色 ，240 是 蓝 色 。 


Saturation 是 百分比 值 096 意味 着 灰色 ， 而 100% 是 全 彩 。Lightness 同样 是 百分比 值 096 
是 黑色 ，100% 是 白色 。 


实例 


p 


{ 
background-color:hs1(120, 6596, 7596) ; 
} 


HSLA 颜色 


HSLA 颜色 值得 到 以 下 浏览 器 的 支持 : IE9+、Firefox 3+、Chrome、Safari 以 及 Opera 10+, 
HSLA 颜色 值 是 HSL 颜色 值 的 扩展 ， 带 有 一 个 alpha 通道 - 它 规定 了 对 象 的 不 透明 度 。 


HSLA 颜色 值 是 这 样 规定 的 : hsla(hue, saturation, lightness, alpha)， 其 中 的 alpha 参数 定义 
不 透明 度 。alpha 参数 是 介 于 0.0 〈 完 全 透明 ) 与 1.0 (完全 不 透明 ) 的 数字 。 


实例 


p 


t 
background-color:hsla(120,6596,7596,0.3); 
} 


CSS 颜色 名 


CSS 颜色 名 


所 有 浏览 器 都 支持 的 颜色 名 。 


HTML 和 CSS 颜色 规范 中 定义 了 147 中 颜色 名 (17 种 标准 颜色 加 130 种 其 他 颜色 ) 。 下 面 
的 表格 中 列 出 了 所 有 这 些 颜 色 ， 以 及 它们 的 十 六 进 制 值 。 


提示 : 17 种 标准 色 是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, 
orange, purple, red, silver, teal, white, yellow. 


点 击 颜色 名 (或 十 六 进 制 值 ) 来 查看 这 种 颜色 作为 背景 色 搭配 不 同 的 文本 颜色 : 


以 颜色 名 排序 


根据 十 六 进 制 值 排序 的 相同 列表 


颜色 名 十 六 进 制 颜色 值 颜色 

AliceBlue #FOF8FF 
AntiqueWhite #FAEBD7 
Aqua #00FFFF 
Aquamarine #7FFFD4 
Azure #FOFFFF 
Beige #F5F5DC 
Bisque #FFE4C4 
Black #000000 
BlanchedAlmond #FFEBCD 
Blue #0000FF 
BlueViolet #8A2BE2 
Brown #A52A2A 
BurlyWood #DEB887 
CadetBlue #5F9EA0 
Chartreuse #7FFFOO 
Chocolate #D2691E 
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Coral 
CornflowerBlue 
Cornsilk 
Crimson 

Cyan 

DarkBlue 
DarkCyan 
DarkGoldenRod 
DarkGray 
DarkGreen 
DarkKhaki 
DarkMagenta 
DarkOliveGreen 
Darkorange 
DarkOrchid 
DarkRed 
DarkSalmon 
DarkSeaGreen 
DarkSlateBlue 
DarkSlateGray 
DarkTurquoise 
DarkViolet 
DeepPink 
DeepSkyBlue 
DimGray 
DodgerBlue 
Feldspar 
FireBrick 
FloralWhite 
ForestGreen 


Fuchsia 





Gainsboro 


CSS 颜色 名 


#FF7F50 
#6495ED 
#FFF8DC 
#DC143C 
#00FFFF 
#00008B 
#008B8B 
#B8860B 
#A9A9A9 
#006400 
#BDB76B 
#8B008B 
#556B2F 
#FF8C00 
#9932CC 
#8B0000 
#E9967A 
#8FBC8F 
#483D8B 
#2F4F4F 
#00CED1 
#9400D3 
#FF1493 
#00BFFF 
#696969 
#1E90FF 
#D19275 
#B22222 
#FFFAFO 
#228B22 
#FFOOFF 
#DCDCDC 


505 
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GhostWhite 
Gold 
GoldenRod 
Gray 

Green 
GreenYellow 
HoneyDew 
IndianRed 
Indigo 

Ivory 

Khaki 
Lavender 
LavenderBlush 
LawnGreen 
LightBlue 
LightCoral 





LightCyan 
LightGoldenRodYellow 
LightGrey 
LightGreen 
LightPink 
LightSalmon 
LightSeaGreen 
LightSkyBlue 
LightSlateBlue 
LightSlateGray 
LightSteelBlue 
LightYellow 


Lime 





CSS 颜色 名 


#F8F8FF 
#FFD700 
#DAA520 
#808080 
#008000 
#ADFF2F 
#FOFFFO 
#FF69B4 
#CD5C5C 
#4B0082 
#FFFFFO 
#FOE68C 
#E6E6FA 
#FFFOFS 
#7CFCOO 
#FFFACD 
#ADD8E6 
#F08080 
#EOFFFF 
#FAFAD2 
#D3D3D3 
#90EE90 
#FFB6C1 
#FFAO7A 
#20B2AA 
#87CEFA 
#8470FF 
#778899 
#B0C4DE 
#FFFFEO 
#00FF00 


506 
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LimeGreen #32CD32 
Linen #FAFOE6 
Magenta #FFOOFF 
Maroon #800000 
MediumAquaMarine #66CDAA 
MediumBlue #0000CD 
MediumOrchid #BA55D3 
MediumPurple #9370D8 
MediumSeaGreen #3CB371 
MediumSlateBlue #7B68EE 
MediumSpringGreen #00FA9A 
MediumTurquoise #48D1CC 
MediumVioletRed #C71585 
MidnightBlue #191970 
MintCream #F5FFFA 
MistyRose #FFE4E1 
Moccasin #FFE4B5 
NavajoWhite #FFDEAD 
Navy #000080 
OldLace #FDF5E6 
Olive #808000 
OliveDrab #6B8E23 
Orange #FFA500 
OrangeRed #FF4500 
Orchid #DA70D6 
PaleGoldenRod #EEE8AA 
PaleGreen #98FB98 
PaleTurquoise #AFEEEE 
PaleVioletRed #D87093 
PapayaWhip #FFEFD5 
PeachPuff #FFDAB9 
Peru #CD853F 
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Pink #FFCOCB 
Plum #DDAODD 
PowderBlue #BOEOE6 
Purple #800080 
Red #FF0000 
RosyBrown #BC8F8F 
RoyalBlue #4169E1 
SaddleBrown #8B4513 
Salmon #FA8072 
SandyBrown #F4A460 
SeaGreen #2E8B57 
SeaShell #FFF5EE 
Sienna #A0522D 
Silver #COCOCO 
SkyBlue #87CEEB 
SlateBlue #6A5ACD 
SlateGray #708090 
Snow #FFFAFA 
SpringGreen #00FF7F 
SteelBlue #4682B4 
Tan #D2B48C 
Teal #008080 
Thistle #D8BFD8 
Tomato #FF6347 
Turquoise #40E0D0 
Violet #EE82EE 
VioletRed #D02090 
Wheat #F5DEB3 
White #FFFFFF 
WhiteSmoke #F5F5F5 
Yellow #FFFF00 
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|» YellowGreen Z9 ACD32 
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CSS 颜色 十 八进制 值 


根据 十 六 进 制 值 排序 


所 有 浏览 器 都 支持 的 颜色 名 
根据 颜色 名 排序 的 相同 列表 


颜色 名 
Black 
Navy 
DarkBlue 
MediumBlue 
Blue 
DarkGreen 
Green 
Teal 
DarkCyan 
DeepSkyBlue 
DarkTurquoise 
MediumSpringGreen 
Lime 
SpringGreen 
Aqua 
Cyan 
MidnightBlue 
DodgerBlue 
LightSeaGreen 
ForestGreen 
SeaGreen 
DarkSlateGray 


LimeGreen 


CSS 颜色 十 六 进 制 值 


十 六 进 制 颜色 值 
#000000 
#000080 
#00008B 
#0000CD 
#0000FF 
#006400 
#008000 
#008080 
#008B8B 
#00BFFF 
#00CED1 
#00FA9A 
#00FF00 
#00FF7F 
#00FFFF 
#00FFFF 
#191970 
#1E90FF 
#20B2AA 
#228B22 
#2E8B57 
#2F4F4F 
#32CD32 


510 
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MediumSeaGreen 
Turquoise 
RoyalBlue 
SteelBlue 
DarkSlateBlue 





MediumTurquoise 


DarkOliveGreen 
CadetBlue 
CornflowerBlue 
MediumAquaMarine 
DimGray 
DimGrey 
SlateBlue 
OliveDrab 
SlateGray 
LightSlateGray 
MediumSlateBlue 
LawnGreen 
Chartreuse 
Aquamarine 
Maroon 

Olive 

Gray 

SkyBlue 
LightSkyBlue 
BlueViolet 
DarkRed 
DarkMagenta 
SaddleBrown 





DarkSeaGreen 


CSS 颜色 十 六 进 制 值 


#3CB371 
#40E0D0 
#4169E1 
#4682B4 
#483D8B 
#48D1CC 


#556B2F 
#5F9EAO 
#6495ED 
#66CDAA 
#696969 
#696969 
#6A5ACD 
#6B8E23 
#708090 
#778899 
#7B68EE 
#7CFCOO 
#7FFFOO 
#7FFFD4 
#800000 
#800080 
#808000 
#808080 
#87CEEB 
#87CEFA 
#8A2BE2 
#8B0000 
#8B008B 
#8B4513 
#8FBC8F 


511 
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LightGreen #90EE90 
MediumPurple #9370DB 
DarkViolet #9400D3 
PaleGreen #98FB98 
DarkOrchid #9932CC 
YellowGreen #9ACD32 
Sienna #A0522D 
Brown #A52A2A 
DarkGray #A9A9A9 
LightBlue #ADD8E6 
GreenYellow #ADFF2F 
PaleTurquoise #AFEEEE 
LightSteelBlue #B0C4DE 
PowderBlue #BOEOE6 
FireBrick #B22222 
DarkGoldenRod #B8860B 
MediumOrchid #BA55D3 
RosyBrown #BC8F8F 
DarkKhaki #BDB76B 
Silver #COCOCO 
MediumVioletRed #C71585 
IndianRed #CD5C5C 
Peru #CD853F 
Chocolate #D2691E 
Tan #D2B48C 
LightGray #D3D3D3 
Thistle #D8BFD8 
Orchid #DA70D6 
GoldenRod #DAA520 
PaleVioletRed #DB7093 
Crimson #DC143C 
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Gainsboro #DCDCDC 
Plum #DDA0DD 
BurlyWood #DEB887 
LightCyan #E0FFFF 
Lavender #E6E6FA 
DarkSalmon #E9967A 
Violet #EE82EE 
PaleGoldenRod #EEE8AA 
LightCoral #F08080 
Khaki #FOE68C 
AliceBlue #FOF8FF 
HoneyDew #FOFFFO 
Azure #FOFFFF 
SandyBrown #F4A460 
Wheat #F5DEB3 
Beige #F5F5DC 
WhiteSmoke #F5F5F5 
MintCream #F5FFFA 
GhostWhite #F8F8FF 
Salmon #FA8072 
AntiqueWhite #FAEBD7 
Linen #FAFOE6 
LightGoldenRodYellow #FAFAD2 
OldLace #FDF5E6 
Red #FF0000 
Fuchsia #FFOOFF 
Magenta #FFOOFF 
DeepPink #FF1493 
OrangeRed #FF4500 
Tomato #FF6347 
HotPink #FF69B4 
Coral #FF7F50 
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Ivory #FFFFFO 
White #FFFFFF 


BlanchedAlmond 
LavenderBlush 
LemonChiffon 
FloralWhite 
FFFrr 0000 | 
FFFFE O 
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免责 声明 


W3School 提 供 的 内 容 仅 用 于 培训 。 我 们 不 保证 内 容 的 正确 性 。 通 过 使 用 本 站 内 容 随 之 而 来 的 
风险 与 本 站 无 关 。W3School 简 体 中 文 版 的 所 有 内 容 仅 供 测试 ， 对 任何 法 律 问题 及 风险 不 承担 
任何 责任 。 


